react native : There is way to detect if it is the first time launch of the app or not?

Question

There is way to detect if it is the first time launch of the app or not ? only if it is NOT the first time that the app was opened so return only the "AppNavigator" else return everything . this is my example code : How do I use the AsyncStorage example with my code ?

///////// AsyncStorage/////////////

async componentDidMount() {
  const firstTime = await AsyncStorage.getItem("isFirstTime")
  if(firstTime != null) {
    // It is not first time use
  } else {
    // It is first time
    await AsyncStorage.setItem("isFirstTime", 'true')
  }
}

///////////////  My code  //////////////

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      azureLoginObject: {},
      loginSuccess: false,
    };
    this.azureInstance = new AzureInstance(credentials);
    this._onLoginSuccess = this._onLoginSuccess.bind(this);
  }

  _onLoginSuccess() {
    this.azureInstance
      .getUserInfo()
      .then((result) => {
        this.setState({
          loginSuccess: true,
          azureLoginObject: result,
        });
        console.log(result);
        //HERE EXAMPLE FOR STORE SOME VARIABLE INTO MY REDUX STORE
        store.dispatch(userPrincipalName(result.userPrincipalName));
        store.dispatch(givenName(result.mobilePhone));
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    if (!this.state.loginSuccess) {
      return (
        <Provider store={store}>
          <AzureLoginView
            azureInstance={this.azureInstance}
            loadingMessage="Requesting access token"
            onSuccess={this._onLoginSuccess}
          />
        </Provider>
      );
    }

    const { userPrincipalName, givenName } = this.state.azureLoginObject;

    return (
      <Provider store={store}>
        <AppNavigator />
      </Provider>
    );
  }
}

Answer 1

As per the other Answer you will have to use the Asyn storage to check the value on Componentdidmount and set the value if its not there.

Also the rest of the logic will have to be changed a bit as well. Here we show the ActivityIndicator until the check is done and you can do whatever you want after that. I couldnt test this code as it has dependencies but I've put some inline comments so that you can change appropriately.

import { ActivityIndicator } from "react-native";
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            azureLoginObject: {},
            loginSuccess: false,
            loading: true
        };

    }

    async componentDidMount() {
        const firstTime = await AsyncStorage.getItem("isFirstTime")
        if (firstTime != null) {
            this.setState({ loading: false });

            //Place this based on your logic
            this.azureInstance = new AzureInstance(credentials);
            this._onLoginSuccess = this._onLoginSuccess.bind(this);

        } else {
            // It is first time
            await AsyncStorage.setItem("isFirstTime", 'true');
            this.setState({ loading: false })
        }
    }

    _onLoginSuccess() {
        this.azureInstance
            .getUserInfo()
            .then((result) => {
                this.setState({
                    loginSuccess: true,
                    azureLoginObject: result,
                });
                console.log(result);
                //HERE EXAMPLE FOR STORE SOME VARIABLE INTO MY REDUX STORE
                store.dispatch(userPrincipalName(result.userPrincipalName));
                store.dispatch(givenName(result.mobilePhone));
            })
            .catch((err) => {
                console.log(err);
            });
    }

    render() {
        //Show activity indicator until async storage check is done
        if (this.state.loading)
            return <ActivityIndicator />;

        if (!this.state.loginSuccess) {
            return (
                <Provider store={store}>
                    <AzureLoginView
                        azureInstance={this.azureInstance}
                        loadingMessage="Requesting access token"
                        onSuccess={this._onLoginSuccess}
                    />
                </Provider>
            );
        }

        const { userPrincipalName, givenName } = this.state.azureLoginObject;

        return (
            <Provider store={store}>
                <AppNavigator />
            </Provider>
        );
    }
}

Answer 2

You can use asyncStorage:

async componentDidMount() {
  const firstTime = await AsyncStorage.getItem("isFirstTime")
  if(firstTime != null) {
    // It is not first time use
  } else {
    // It is first time
    await AsyncStorage.setItem("isFirstTime", 'true')
  }
}