Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native Onboarding screens

Tags:

react-native

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?

like image 528
vtambourine Avatar asked Mar 02 '16 08:03

vtambourine


People also ask

How do I create a onboarding screen with react native?

The first thing to do is to create a folder in the project's root directory, name it assets as it is where the images that will be added to the Onboarding Screen will be located then add some images into the folder. Next, import the React Native Onboarding Swiper into your project using the code below.

What's an onboarding screen?

The onboarding screens are the first things that the users see when they launch your application. It's sometimes known as first user experience (FUX). It is usually used to demonstrate some facts about the application such as how to use it, the application features, and how the application can help the users.


4 Answers

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();
  }
}
like image 192
Johannes Filter Avatar answered Oct 20 '22 22:10

Johannes Filter


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

like image 34
santi Avatar answered Oct 21 '22 00:10

santi


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

like image 35
syam s Avatar answered Oct 20 '22 23:10

syam s


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.

like image 5
blackxored Avatar answered Oct 20 '22 23:10

blackxored