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.

Answer 1

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:

1. Realm
2. Firebase
3. SQLite
4. Core Data
5. PouchDB
6. Async Storage(not a full scale database, but still quite popular)