Skip to content

Instantly share code, notes, and snippets.

@dekameron22

dekameron22/App.js

Created March 18, 2019 16:36
Show Gist options
  • Save dekameron22/f3d6dd041e6b9380b4c40524e8c497eb to your computer and use it in GitHub Desktop.
Save dekameron22/f3d6dd041e6b9380b4c40524e8c497eb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
App.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import {
createReduxContainer,
createReactNavigationReduxMiddleware,
createNavigationReducer
} from 'react-navigation-redux-helpers';
import { createLogger } from 'redux-logger';
import applyAppStateListener from 'redux-enhancer-react-native-appstate';
import thunkMiddleware from 'redux-thunk';
import ReduxNavigation from './src/navigation/ReduxNavigation';
import AppNavigator from './src/navigation/stacks';
import reducers from './src/redux/reducers';
const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers(
Object.assign(
{
nav: navReducer
},
reducers
)
);
// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(state => state.nav);
const loggerMiddleware = createLogger({
predicate: (getState, action) => __DEV__
});
export const App = createReduxContainer(AppNavigator);
function configureStore(initialState) {
const enhancer = compose(
applyAppStateListener(),
applyMiddleware(middleware, thunkMiddleware, loggerMiddleware)
);
return createStore(appReducer, initialState, enhancer);
}
const store = configureStore({});
export default class Root extends React.Component {
render() {
return (
<Provider store={store}>
<ReduxNavigation />
</Provider>
);
}
}
Raw
ReduxNavigation.js
import React from 'react';
import { BackHandler } from 'react-native';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { App } from '../../App';
class ReduxNavigation extends React.Component {
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
}
onBackPress = () => {
const { nav, dispatch } = this.props;
if (nav.index === 0) {
return false;
}
dispatch(NavigationActions.back());
return true;
};
render() {
const { nav, dispatch } = this.props;
return <App state={nav} dispatch={dispatch} />;
}
}
const mapStateToProps = state => ({
nav: state.nav
});
export default connect(mapStateToProps)(ReduxNavigation);
Raw
stacks.js
import React from 'react';
import {
createSwitchNavigator,
createStackNavigator,
createAppContainer
} from 'react-navigation';
import AuthScreen from '../screens/auth/Auth';
import MainScreen from '../screens/main/Main';
import AuthLoadingScreen from '../screens/authLoading/AuthLoading';
const AppStack = createStackNavigator({ Home: MainScreen });
const AuthStack = createStackNavigator({ Auth: AuthScreen });
export default createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack
},
{
initialRouteName: 'AuthLoading'
}
)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment