React Native Onboarding screens

Question

What is the best way to implement Onboarding (or Welcome) screen on React Native application? Screen must have a slider view to slide between introductory points and some system to store 'show once' flag. I can see how to implement it with vanilla code, but probably there is complete component exists?

Answer 1

Yes, a complete component exists: https://github.com/jfilter/react-native-onboarding-swiper. (I am the author)

In the most basic case, you give an image, a title, and subtitle for each page.

For saving the flag, use AsyncStorage. When launching your main screen, check for the flag and navigate to the Onboarding screen. On completion, set the flag and navigate to the main screen. See e.g.:

async componentWillMount() {
  const value = await AsyncStorage.getItem('@SKIP_INTRO');
  if (value === null || value !== 'true') {
    this.props.navigateToIntro();
  }
}

Answer 2

I didn't find any custom, all-in-one component, but I think that a combination of ViewPagerAndroid and AsyncStorage may do the trick without much effort (both classes come from the react-native package).

For example, for the slider view, you can create component like this:

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

export default class Onboarding extends Component {

    render() {

        return (
          <ViewPagerAndroid style={{ flex: 1 }} initialPage={0}>
            <View style={{alignItems: 'center', padding: 20}}>
              <Text>First page</Text>
            </View>
            <View style={{alignItems: 'center', padding: 20}}>
              <Text>Second page</Text>
            </View>
          </ViewPagerAndroid>
        );

    }

}

And then, for the "show once" flag, you may handle it in you main app's component like this:

componentDidMount() {

  AsyncStorage.getItem('onboarding').then((val) => {

    if (!val) {
      this.setState({ onboarding: 'pending' });
      AsyncStorage.setItem('onboarding', 'done').done();
    } else {
      this.setState({ onboarding: val });
    }

  }).done();

}

render() {

  switch (this.state.onboarding) {
    case 'pending': return (<Onboarding />);
    case 'done': return (<Home />);
    default: return (<Loading />);
  };

}

This code will show the Onboarding component only the first time the App is executed. You could also set the flag to "done" within the clic handler of a button inside the last view of the slider, to repeat the onboarding if the user didn't finish in the first run, that's up to you.

If you also need an iOS version, you could use <ScrollView pagingEnabled={true}> instead of the ViewPagerAndroid

Answer 3

react-native-app-intro is a popular choice for onboarding but it is no longer actively maintained. So i suggest you to go with the react-native-app-intro-slider, a modified version of the previous one that supports latest React Naive.

But you should handle first launch setup yourself by using AsyncStorage.

Below question will help you detect and setup first launch.

How to detect first launch in react-native

Answer 4

I think react-native-app-intro is pretty much what you want. It gives a basic pager with some nice next and Done buttons by default but you can add extra transition effects to elements in each page.