CODEWITHSUNDEEP
iosreactjsreact-native
Eric Phillips
Eric Phillips

Reputation: 507

Showing an intro of React Native app only once?

I already have a Model view in react native that can be accessed from a button in the settings, and I would like it to pop up the first time the app is used. In other words, I don't have any problems with the view itself, just the functionality.

I've considered user React-native-simple-store but it seems like there should be an easier way.

Thanks, Eric

Upvotes: 2

Views: 2136

Answers (1)

Tom
Tom

Reputation: 4662

To pop-up the modal you will have to set its visible props:

<Modal visible={this.state.showModal} ...

If you save this value into AsyncStorage, or any database, like RealmDB or Sqlite, you can always read the value and then make modal show-up only once. Put it in componentDidMount : 

const value = AsyncStorage.getItem('once');

if (value !== null) {
  value.then((ret) => {
    if (ret === null) {
      // this is the first time
      // show the modal
      // save the value

      AsyncStorage.setItem('once', 'yes');
      this.setState({
         showModal: true,
      });

    } else {
      // this is the second time
      // skip the modal

    }
  }).catch(err => alert(err.toString()));
}

In your modal:

<Modal visible={this.state.showModal} ...

In your constructor:

this.state = {showModal: false}

Upvotes: 3

Related Questions