Few Steps To set Up Onboarding Screens In React- Native

Onboarding screen

Hello again, mobile developer, today am going to share with you some few easy steps to creating an amazing onboarding screen for your Android application. Before we continue, I want to make sure you follow along, I assume you have basic knowledge of react-native and a good appreciation of JavaScript. You also have a react-native app installed in your system.

What is an Onboarding Screen

An onboarding process is essentially a series of screens which welcome users onto an app and gives them an overview of how they may interact with the interface your app provides.

Onboarding screens are screens that give a brief and simple-to-understand flow of an app interface.

Firstly

Set up your app if you have not set it up. Now let Jump into building an onboarding screen

Installation

we will be needing a package called react-native-onboarding-swiper

After installing it, import it on the component

import Onboarding from 'react-native-onboarding-swiper';

How to use The Package

navigation is automatic among the screens

Required Properties

The backgroundColor (required): a background colour. The colour of the font and dots adapts to the background colour.

• image (required): a component <Image /> to display at the top of the page.

image: <Image source={require(URL in string)} />,

• title (required): a string or a React-Native component.

title: 'Onboarding' 
// Or use a react-native component
title: <Title />

• subtitle (required): a string or a React-Native component.

subtitle: 'Onboarding'
// or use a react-native component
subtitle: <Title/>

Buttons

• nextLabel (optional): a string or a React-Native component for the Next label. Defaults to Next.

nextLabel={"Next"}

• showNext (optional): a boolean flag indicating whether the Next button is visible. Defaults to true.

showNext={true OR False}

• skipLabel (optional): a string or a React-Native component for the Skip label. Defaults to Skip.

skipLabel={"skip"}

• showSkip (optional): a boolean flag indicating whether the Skip button is visible. Defaults to true.

showSkip={true Or false}

• showDone (optional): a boolean flag indicating whether the Done checkmark button is visible. Defaults to true.

General

• bottomBarHeight (optional): a number for the height of the bottom bar. Defaults to 60.

bottomBarHeight={Number}

• bottomBarColor (optional): backgroundColor of the bottom bar. Defaults to transparent.

bottomBarColor={color}

• bottomBarHighlight (optional): a boolean flag indicating whether the bottom bar should be highlighted. Defaults to true.

bottomBarHeightLight={true OR false}

Default Page Styles

For the pages in the pages array, you can set the default styles (and override the styles set by this component).

• containerStyles (optional): override the default container styles.

• imageContainerStyles (optional): override the default image container styles e.g. the paddingBottom of 60.
• titleStyles (optional): override the default title styles.

Adjust Individual Page Styles

For each page in the pages array, you can override the default page styles. An example.

• titleStyles (optional): modify styles of a specific page's title.
• subTitleStyles (optional): modify styles of a specific page's subtitle.

Custom Components Properties

You can also provide your own custom components for the buttons and the dots. All of them have access to a isLight prop but it's up to you what you do with it. Also, check out this example.

• SkipButtonComponent (optional): Skip Button, gets skipLabel as a prop.
• NextButtonComponent (optional): Next Button, gets nextLabel as a prop.
• DoneButtonComponent (optional): Done Button.
• DotComponent (optional): Dot for the pagination, gets selected as a prop to indicate the active page.

const Skip = () => 
<View style={{
    marginLeft: 22,
    width: '0%'}}>
</View>;
const Next = ({...props}) => (
<View style={{
    marginRight: 22
}}>
<BasicButton 
    buttonText="Next" 
         width={100} 
       {...props} />
</View>
);

const Done = () => (
<View style={{ 
   marginRight: 22
}}>
  <BasicButton
    buttonText="Next"
    width={100}
    color={theme.primary}
  
/>
</View>
);

<Onboarding
   SkipButtonComponent={Component}
   NextButtonComponent={Component}
   DoneButtonComponent={Component}
   DotpButtonComponent={Component}
   pages={[
               //First screen
{
      backgroundColor: '#fff',
      image: <Image source={require(URL in string)} />,
      title: 'Title',
      subtitle: 'SubTitle,
    },
          //First screen ends-
             
            //second screen start
{
      backgroundColor: '#fff',
      image: <Image source={require(URL in string)} />,
      title: 'Title',
      subtitle: 'SubTitle',
    },  
        second screen end
            ...
  ]}
/>