rgommezz

import LocalStorage from '../logic/LocalStorage';

let instance;
const ACCEPT_HEADER = 'application/json, text/plain, */*; api-token:';
const CONTENT_TYPE_HEADER = 'application/x-www-form-urlencoded';

const defaultHeaders = {
  Accept: ACCEPT_HEADER,
  'Content-Type': CONTENT_TYPE_HEADER,
};

rgommezz

Table of contents

• Store
  • Creation
  • Injection
• Redux chrome devtools
• Redux-form
  • Reducer
  • Decorator
  • Field
• Adapter HoC

rgommezz

import React from 'react';
import { withNetworkConnectivity } from 'react-native-offline';
import { View, Text } from 'react-native';
import EventList from './EventList';

const EventsForDay = ({ isConnected, day }) => (
  <View style={{ flex: 1 }}>
   {isConnected ? <EventList day={day} /> : <Text>We are offline :(</Text>}
  </View>
);

rgommezz

import React, { Component } from 'react';
import {
  View,
  ScrollView,
  StyleSheet,
} from 'react-native';
import { ConnectivityRenderer } from 'react-native-offline';
// Rest of component imports ...

class EventDetailsScreen extends Component {

rgommezz

import NetInfo from 'react-native';
import { call, put, select, fork, takeEvery } from 'redux-saga';
import * as actions from './actions';
import api from './api';

function* fetchData({ payload }) {
  const isConnected = yield call([NetInfo, NetInfo.isConnected.fetch]);
  if (isConnected) {
    const accessToken = yield select(accessTokenSelector);
    try {

rgommezz

function* fetchData({ payload }) {
  const accessToken = yield select(accessTokenSelector);
  try {
    const { data } = yield call(api.fetchData, accessToken, payload.params);
    yield put(actions.fetchDataSuccess(events));
  } catch (error) {
    yield put(actions.fetchDataError(error));
  }
}

rgommezz

export const fetchUser = (url) => {
  return function thunk(dispatch) {
    fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        dispatch({type: FETCH_USER_SUCCESS, payload: responseJson});
      })
      .catch((error) => {
        console.error(error);
      });

rgommezz

import React, { Component } from 'react';
import hoistStatics from 'hoist-non-react-statics';

/**
 * Function utility that serves as workaround for https://github.com/wix/react-native-navigation/issues/838#issuecomment-320475935
 * It waits for 'didAppear' event to happen on the native side before rendering content into the screen.
 * That avoids annoying flickering when switching to a new bottom tab for the first time.
 * @param tabId
 * @returns {function(ReactClass.<*>)}
 */

rgommezz

function isNetworkConnected(): Promise<boolean> {
  if (Platform.OS === 'ios') {
    return new Promise(resolve => {
      const handleFirstConnectivityChangeIOS = isConnected => {
        NetInfo.isConnected.removeEventListener(
          'change',
          handleFirstConnectivityChangeIOS,
        );
        resolve(isConnected);
      };

rgommezz

// @flow
import React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import SafeAreaView from '../../lib/react-native-safe-area-view';

export default function withSafeAreaView(
  WrappedComponent: ReactClass<*>,
): () => React.Element<*> {
  function EnhancedComponent(props: any) {
    return (