How to do better routing and app structure in React Native?

Question

I'm a Java Android developer and been experimenting with React Native lately. What I've been looking into is something similar to the navigation as that of Android Java code.

First, I want to get to SplashScreen. Then check if the user is logged inor not, then take the user into the app or to the login screen.

Now, to achieve this, I need to know if the user is logged in. How do I do that? I don't want to maintain global variables in index.js nor do I want index.js to be the central routing system. Can I store somewhere a flag that says that the user is already logged in, and what's the access-token of the logged in user?

I'm able to visualize this well in native Java code, but failing to figure out how to do in React Native.

Answer 1

In my React Native app, I store all my data in a Redux store. So, when the user initially puts their username and password in the input, I send it up to the server which then sends down an access token. Once I receive the access token, I store this in the Redux store. Therefore, if the user returns to the app later, I just check the Redux store to see if the access token is present. If it is, I know that the user is logged in. I check for the presence of this token all over the place in my app, and further need it for when I make more request to the server.

So to answer your question, you need some way to store the state, and for this I highly recommend checking out the Redux framework which works very well with both React and React Native. http://redux.js.org/