Thursday, 18 April 2019

Using Redux for making protected routes with React-Navigation

How can we use redux to create protected routes in react-navigation?

Consider I have a redux store containing following state

const mapStateToProps = state => {
  return {
    isAuthenticated: state.profileInfo.isAuthenticated,
    isLoaded: state.profileInfo.isLoaded,
    googleProfileLoading: state.profileInfo.googleProfileLoading
  }
};

And I am using React-navigation to navigate user.

const loginNavigation = createStackNavigator(
  {
    login: {
      screen: Login
    },
    signup: {
      screen: Signup
    }
  },
  {
    headerMode: "none"
  }
)

const allRoutes = createSwitchNavigator(
  {
    home: {
      screen: loginNavigation
    },
    user: {
      screen: user

  },
  {
    initialRouteName: "home"
  }
);

const App = createAppContainer(allRoutes);

Now if user is not logged in, I want redirect to login screen.

In simple react-redux, this is what I usually used to do: https://github.com/irohitb/SelfieApp/blob/master/client/src/routes.js

Can someone help me in figuring out how can we create protected routes in react-native, redux and react-navigation



from Using Redux for making protected routes with React-Navigation

No comments:

Post a Comment