React-native access keychain data in navigation

Question

I'm building an App, and as a test I'm storing token in Keychain. In the navigation I'm using stack navigator and switch navigator. I'm trying to retrieve the token from keychain, and use it to determine the intialRouteName : if the token exist -> Home, if not -> authentification.

So here's my code :

Navigation.js


import React, { Component } from 'react'

import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator
} from 'react-navigation'

import Login from '../screens/Login'
import Register from '../screens/Register'
import Home from '../screens/Home'

import * as Keychain from 'react-native-keychain'


async function isLogged() {
 const token = await Keychain.getGenericPassword()
 if(token.username) {
   return 'App'
 }else {
   return 'Auth'
 }
}


const AppStack = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    },
  }
)

const AuthStack = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: {
        header: null
      }
    },
    Register: {
      screen: Register,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    headerLayoutPreset: 'center',
    initialRouteName: 'Login'
  }
)
const MainNavigator = createAppContainer(
  createSwitchNavigator(
    {
      App: AppStack,
      Auth: AuthStack
    },
    {
      initialRouteName: isLogged()
    }
  )
)

export default MainNavigator

App.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { persistor, store } from './src/store/createStore'
import { PersistGate } from 'redux-persist/integration/react'
import MainNavigator from './src/navigation/StackNavigation'


export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <MainNavigator></MainNavigator>
        </PersistGate>
      </Provider>
    )
  }
}

Unfortunately it is not working, the navigator is rendered before getting the token data. I'm having trouble to figure out how to get the data and have the correct view display.. Any ideas ?

score 0 · Answer 1 · edited Jul 26 '20 at 15:52

You can do something like this :

Create a component on top of all the pages which retrieves the token from the key chain and navigate accordingly like this :

  import React, { Component } from 'react';
  import {View} from 'react-native';
  import{Loading} from './LoadingComponent';
  import * as Keychain from 'react-native-keychain'

  class TopComponent extends Component {

  componentDidMount(){
   //retrieve your token here ... 
  this.setState({isLoading:false}); // set loading to false
  if(token.username) {
    this.props.navigation.navigate('AppStack')
  }else {
    this.props.navigation.navigate('AuthStack')
   } 
  }

    constructor(props) {
        super(props);
        this.state = {
         isLoading:true,
        }
      }

    render() {

        if(this.state.isLoading == true){
            return (
              <Loading />
            );
          }else{
            return(
              <View></View>
            );
          }
    }
  }

  export default TopComponent;

Your Loading (activity indicator component) :

  import React from 'react';
  import {
      ActivityIndicator,
      StyleSheet,
      Text,
      View,
    } from 'react-native'

  const styles = StyleSheet.create({
      loadingView: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1
      },
      loadingText: {
        color: '#512DA8',
        fontSize: 14,
        fontWeight: 'bold'
      }
  });

  export const Loading = () => {
      return(
          <View style={styles.loadingView} >
              <ActivityIndicator size="large" color="#512DA8" />
              <Text style={styles.loadingText} >Loading . . .</Text>
          </View>
      );
  }

Finally delete your is logged() function from the switch navigator and add the TopComponent in your switch navigator and set it as the initial route.

React-native access keychain data in navigation

1 Answers1