Asyncstorage in App.js to login as per stored value

Question

This is my implementation in app.js where I'm trying to conditionally set initial screen based on the value if user has logged in or not.

But the method gets called before the value being returned from AsyncStorage.

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import Login from './screens/Login';
import Home from './screens/Home';
import { AppInit } from './utils/AppInit';

export default AppInit({
  initScreen: AsyncStorage.getItem("UserDetailsStored").then((value) => { console.log("stored value ", value); value == "false" ? "Login" : "Home" }),
  screens: {
    Login,
    Home,
    Screen1,
    Screen2,
    Profile
  }
});

Code of AppInit, using react-native-router-flux

const AppInit = (screen) => {
    return App = () => {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <NetworkProvider>
                        <Router>
                            <Stack key="root">
                                {_.map(screen.screens, (name, key) => {
                                    return <Scene initial={key == screen.initScreen ? true : false} hideNavBar key={key} component={name} />
                                })}
                            </Stack>
                        </Router>
                    </NetworkProvider>
                </PersistGate>
            </Provider>
        )
    }
}

I tried ways to change app.js but it doesn't work either. Thanks

Answer 1

I would suggest using one extra screen to check for login.

Check for asyncStorage value there. Because AsyncStorage takes time to fetch data.

so you need to check if data is fetched or not first and then check for your login data. if data is not fetched then show your desired image, data or whatever on screen after checking for login navigate to screen you want.

See this, use this screen as your first screen to load in the app.

let say we have SyncScreen.

import React, { Component } from 'react'
import { Text, View, AsyncStorage } from 'react-native'

export default class SyncScreen extends Component {
  componentWillMount=()=>{
 AsyncStorage.getItem("UserDetailsStored")
 .then((value) => { 
    if(value){
      // navigate to somewhere.....
    }
    else{
      // navigate to login..
    }
  }
),
}
  render() {
    return (
      <View>
        <Text> Wait a minute</Text>
      </View>
    )
  }
}