CODEWITHSUNDEEP
reactjsreact-nativereduxreact-navigation
t97
t97

Reputation: 793

How to manage state of React-Navigation without Redux, React Native

I have created a simple app using create-react-native-app and trying to implement react-navigation in it.

The structure of the app is very simple. In the beginning, the app will load the welcome screen where the user can decide to sign-up or login if already logged then the user will be directly directed to the main home screen.

Looking through the official documentation I noticed that the use of Redux is not recommended and also there is the little ref of how to implement redux with react navigation if none.


Does anyone know how to manage the state of the navigation without Redux without getting mad?

Solution: Use withNavigation

As per official docs :

withNavigation is a higher order component which passes the navigation prop into a wrapped Component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

LINK

Therefore using this component is possible to have access to the props of any component.

Upvotes: 0

Views: 1232

Answers (1)

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4869

Check user token in AuthLoadingScreen (welcome screen in your case). And diverge to SignUp screen or Home depending on user token.

For example...

  1. Wrap WelcomeScreen(AuthLoading), Auth(SignUp, SignIn) and Home( and others screen) through createStackNavigator.

App.js

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);
  1. Write checking user token in constructor of AuthLoadingScreen Class.

AuthLoadingScreen.js

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class AuthLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

Important thing is how to wrap screens in navigation as stack, drawer and tap.

And you can control stack various ways as

  • navigate: go to another screen this.props.navigation.navigate('yourscreen')
  • goBack: close active screen and move back this.props.navigation.goBack()

Especially, there are more control while screen is included in stack.

  • popToTop: go to the top of the stack this.props.navigation.popToTop()
  • push: you will know what to do.
  • pop:
  • replace: replace current route with a new one this.props.navigation.replace(yourscreen')

Ref: https://reactnavigation.org/docs/en/auth-flow.html

Upvotes: 1

Related Questions