CODEWITHSUNDEEP
javascriptandroidiostypescriptreact-native
quest answer
quest answer

Reputation: 95

How to detect application first launch in react native app?

In my scenario, I am having three different screens like Page1, Page2, Page3. Here, if the user last visited page 2 then next time if user open application, instead of showing page1 need to show page2. How to achieve this using a react-native application?

I tried by using async storage but don’t know how to manage multiple pages 

AsyncStorage.getItem("alreadyLaunched").then(value => {
            if(value == null){
                 AsyncStorage.setItem('alreadyLaunched', true); // No need to wait for `setItem` to finish, although you might want to handle errors
                 this.setState({firstLaunch: true});
            }
            else{
                 this.setState({firstLaunch: false});
            }}) // Add some error handling, also you can simply do this.setState({fistLaunch: value == null})

App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';

//import all the screens we are going to switch 
const App = createStackNavigator({
   //Constant which holds all the screens like index of any book 
   FirstPage: { screen: FirstPage, header: null},
   SecondPage: { screen: SecondPage,  headerLeft: null, headerBackTitle: null}, 
   ThirdPage: { screen: ThirdPage}, 
  },
  {
    initialRouteName: 'FirstPage',
  }
);
export default createAppContainer(App);

Upvotes: 0

Views: 4656

Answers (2)

ramashish tomar
ramashish tomar

Reputation: 873

Create another page say "Decider.js" and also import createSwitchNavigator from react-navigation. and make it your default page every time app launches. and there we will check where was the user last time and navigate to that page. Let achieve this as below:

App.js

import { createSwitchNavigator, createAppContainer } from 'react-navigation'; //new import createSwitchNavigator
import { createStackNavigator} from 'react-navigation-stack';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';
import Deccider from './pages/Decider.js'; // New deciding screen

//import all the screens we are going to switch 
const App = createStackNavigator({
   //Constant which holds all the screens like index of any book 
   FirstPage: { screen: FirstPage, header: null},
   SecondPage: { screen: SecondPage,  headerLeft: null, headerBackTitle: null}, 
   ThirdPage: { screen: ThirdPage}, 
  },
  {
    initialRouteName: 'FirstPage',
  }
);

export default createAppContainer(createSwitchNavigator(
    {
        AuthLoading: Decider,
        App: App,
    },
    {
        initialRouteName: 'AuthLoading',
    }
));

Now on every app launch first screen called will be Decider.js

Decide.js

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

export default class AuthLoadingScreen extends React.Component {
    constructor() {
        super();
        this._bootstrapAsync();
    }

    _bootstrapAsync = async () => {
        var alreadyLaunchedPage = await
            AsyncStorage.getItem('alreadyLaunchedPage');
        if (alreadyLaunchedPage) {
            this.props.navigation.navigate(alreadyLaunchedPage);
        } else {
            this.props.navigation.navigate('App');
        }

    };

    render() {
        return (
            <View style={{ flex: 1 }}>
                {/* Any Loading or splash design */}
            </View>
        );
    }
}

**On every page's (FirstPage,SecondPage,ThirdPage) componentDidMount **

...
componentDidMount(){
        AsyncStorage.setItem("alreadyLaunchedPage","FirstPage")//if FirstPage
     // AsyncStorage.setItem("alreadyLaunchedPage","SecondPage")//if SecondPage
     // AsyncStorage.setItem("alreadyLaunchedPage","ThirdPage")//if ThirdPage
    }
...

Hope it will solve your problem.

NOTE: Here we have used createSwitchNavigator to prevent going back to Decider.js once you reach any of the FirstPage, SecondPage or ThirdPage.

Upvotes: 0

Mahdi N
Mahdi N

Reputation: 2178

You should use AsyncStorage to store the current screen, so any time you move from a screen to another you should call

AsyncStorage.setItem('screen', 'nameOfYourScreen')

and in App.js you should call 

AsyncStorage.getItem('screen');

and affect it to initialRouteName

PS: getItem() is asynchronous.

Upvotes: 1

Related Questions