Sharing state across React Native app with React Navigation

react native navigation
react native redux
react native context
react-navigation-stack
react-navigation, screenprops
this.props.navigation undefined
this.props.navigation.navigate not working
react native state management

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.


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)

Share state between screens with custom navigators in React , The steps below assume you've started from a basic React Native app using React Navigation with a structure like the BasicReactNavigationSetup in the snippet above. Create the custom navigator. Set up your state and pass some props. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Sharing state across React Native app with React Navigation


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

State persistence, You might want to save the user's location in the app, so that they are immediately import AsyncStorage from '@react-native-community/async-​storage';. In this post, i'll explain how to pass a state between components in Reactjs. We'll build a small 'How many books did you read?' app, in this application, we have two main components one big called 'Library' and another small 'Book', we have 3 books in the library state and each book has its own state. check any book to count as read.


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.

How to get the current screen metadata in React within react , How do you pass state from one screen to another in react native? About react-native-share. React Native Share API was officially added into React Native documentation since release 0.39 If you have an older version and don’t want to rely on undocumented


How do I share state between react native screens?, I'm trying to build an app with react native and react navigation, such that You can use Context or Redux to share between containers(screens) or components. that's the only way a user can navigate through app in mobile platform. To Make a React Native App. Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to


Sharing state across React Native app with React Navigation, 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  I will write up a detailed example of the new react-navigation API using redux as the navigator’s state management. Step One: Initialize a new project react-native init SampleNavigation. Step Two: Install dependencies. I will use react-native-vector-icons for the icons on the tab-bar.


Navigating React Native apps using React Navigation, When building mobile apps, of primary concern is how we handle a user's navigation through the app — the presentation of the screens and the transitions between them. React React Native Navigation differs slightly in that it directly uses native This container manages navigation state. Share this:. Let’s also make some changes to App.js.We’ll import what we need from react-navigation and implement our navigation there.. It is useful to implement our navigation in the root App.js file because the component exported from App.js is the entry point (or root component) for a React Native app, and every other component is a descendant.