Sharing state across React Native app with React Navigation

Question

I'm setting up an app that uses react-native-navigation. There are some values I'd like to persist across navigation. When I manully trigger navigation, I can pass these as parameters in the call to navigate. But when I use native navigation provided by the plug-in, I'm not able to set this as a parameter.

What would be the best way to share an API token across my entire application, without the necessity to store it in AsyncStorage? Am I missing some obvious solution?

My App.js:

const AppStack = createBottomTabNavigator({
  Members: createStackNavigator({
    MemberList: MemberList,
    AddMember: NewMember,
  },{
    mode: 'card',
    initialRouteName: "MemberList"
  }),
  Scan: Scanner
});
const AuthStack = createStackNavigator({ Login: Login });

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack
    },
    {
      initialRouteName: "AuthLoading"
    }
  )
);

The Auth stack is taking care of the authentication, after the API token is acquired, I manually reroute to the App using this approach:

    this.props.navigation.navigate({
        routeName: 'App',
        params: { auth_token: data.auth_token },
        action:  this.props.navigation.navigate({
          routeName: 'MemberList',
          params: { auth_token: data.auth_token}
        })
      });

The problem occurs when I start navigating with the bottom Nav, because this is dealt with by the plugin, there seems to be no persisted parameters.

JRK · Accepted Answer · 2019-01-07T14:27:58.763

So, I know Redux has been bought up - but I'm going to give my 2 pence here.

For

In your application, you want to figure out how complex your state will become. In the comment on a post, I see you see Redux as 'overkill' - at first it may seem like this because you only need to use a global state once (for now).

The question you need to ask, is: How big will my application become? If you're building an app which simply calls an API - then I guess it would be! But, my guess is that there's more complexity to your app.

When you start working with state, redux is a great way to understand and control predictably that state as well as accessing it globally. So, if it will save you hours downs the line (rather than passing local state as props) then I would go for it.

Docs: https://redux.js.org/introduction/getting-started

Against

Obviously if you do deem it as overkill, then you can use an alternative solution like Async Storage. Remember though that this is not secure and therefore you shouldn't store sensitive data.

Is React Native's Async Storage secure?

Other types of storage

You can use other types of storage for your application, typically other types of DB storage.

https://dev.to/purvak_pathak/the-database-selection-guide-for-react-native-3kfm

They include:

Realm
Firebase
SQLite
Core Data
PouchDB
Async Storage(not a full scale database, but still quite popular)

Do you consider an API token as sensitive, in the sense that it can be stolen by using AsyncStorage? — bo-oz, Jan 07 '19 at 14:20
Have a look here: https://stackoverflow.com/questions/39028755/save-sensitive-data-in-react-native — JRK, Jan 07 '19 at 14:25
Great addition! So AsyncStorage seems fine for my specific use case. Thanks, marked yours as the solution. — bo-oz, Jan 07 '19 at 19:56

score 1 · Answer 2 · answered Jan 07 '19 at 12:49

1

Use React-Redux, Redux to create a centralised store at application level. Once the user is successfully login save the token in store and you can call it and use that state Value through-out the app in any component you want. Visit https://redux.js.org also Visit https://medium.com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde

answered Jan 07 '19 at 12:49

Ashutosh Patel

91
4

I read about Redux, but it seems like overkill for a very simple usecase. Should I revert to AsyncStorage? – bo-oz Jan 07 '19 at 13:19
redux is best approach to maintain centralised store but you can also use AsyncStorage for small scale app and don't forget to maintain callback scenarios otherwise it won't work efficiently – Ashutosh Patel Jan 08 '19 at 04:02

score 0 · Answer 3 · answered Jan 07 '19 at 12:59

0

If you only want to store a simple static data you can create a static variable available everywhere in the app.

export static var authToken = "your token"

Then you just have to import it when you need it.

answered Jan 07 '19 at 12:59

MaximumLasagna

136
1
10

It's a dynamic token, coming from an API call. – bo-oz Jan 07 '19 at 13:19

Sharing state across React Native app with React Navigation

3 Answers3