Passing params to nested React Navigation states

Question

My structure is as follows:

Switch navigator
- LoginScreen
- Drawer navigator
  - Stack navigator
    - ListTasksScreen
  - Stack navigator
    - ListDirectivesScreen

The app starts at the login screen. When logging in succeeds, I this.props.navigate() to ListTasksScreen and pass credentials to it.

However when the user now changes the screen by opening the drawer and pressing an item, parameters are lost. Without the credentials, I can't query an API.

Code:

export const app = createSwitchNavigator(
  {
    login: {screen: LoginScreen}, 
    main: {screen: MainScreen},
  },
  {initialRouteName: "login"}
)

export class LoginScreen extends React.Component {
  performLogin() {
    this.props.navigation.navigate(
      "listTasks",
      {api: this.api, userId: response.id}
    )
  }
}

export const MainScreen = createDrawerNavigator({
  listTasksStack: {screen: createStackNavigator({listTasks: ListTasksScreen})},
  listDirectivesStack: {screen: createStackNavigator({listDirectives: ListDirectivesScreen})},
  logout: {screen: LogoutScreen},
})

export class ListTasksScreen extends React.Component {
  doSomething() {
    this.props.navigation.getParam("api") // <-- Not available!
  }
}

export class ListDirectivesScreen extends React.Component {}
export class LogoutScreen extends React.Component {}

Is there a way to pass parameters down to children, or access parent parameters? Or are there other approaches?

One way of doing this would be to keep a state say, `isLoggedIn`whose default value is `false` and switches to `true` once a user logged in. You can then keep the api credentials in a variable than can be accessed only if `isLoggedIn` is true. — AndrewL64, Jun 08 '18 at 20:17
@AndrewL Source added. Where do I keep that state? I want to store an API token and user ID which I need in several screens for querying an API. — stschindler, Jun 08 '18 at 20:22
My opinion based on my experience - I found React Navigation to be absolutely disastrous and realized how can something so simple be so hard. I ended up using Wix's React-native-navigation (https://github.com/wix/react-native-navigation). I love it and I have it in every single RN project. If you're fairly new to React-Navigation, my recommendation would be to switch soon. — Aswin Ramakrishnan, Jun 08 '18 at 21:57

score 0 · Answer 1 · answered Jun 09 '18 at 00:21

The reason why you can not access your credential after you move away from ListTasksScreen is because your credential is a prop in the ListTasksScreen component.

You probably want something else to store user credential in your app, and let react-navigation just handle navigation.

An easy way to get started is to use AsyncStorage:

import { AsyncStorage } from 'react-native';
// ...

class LogInScreen extends React.Component {
   handleLogIn = () {
      this.logIn(token => {
        AsyncStorage.setItem('MyToken', token);
      });
    }
}

Then in your other screen you can retrieve your token:

getData = () => {
  AsyncStorage.getItem('MyToken').then(token => {
    const headers = { Authentication: `Bearer ${token}` };
    fetch('my-backend.com/api/data', { method: 'GET', headers }).then(
      // ...
    )
  });
}

This is a safe way to store sensitive information read more here.

However you can also use this react-native-keychain to store in your user credentials.

Passing params to nested React Navigation states

1 Answers1