Home
React Native

How to create react native app intro slider

app intro slider in react native using functional component

Hi Guys today we would going to learn intregate app intro slider using react native code. There is a many way o onboard people to your mobile application. here we are discuss how to create a onboarding slider using react native programming with customise buttons. so let's start

Now we can use the React Native Onboarding Swiper package to integrate onboading. It is easy for setup and customizable. it is supported on Android and IOS. So please follow the bellow steps

Step 1, Copy and run the following command to install the package 
  
    npm i react-native-onboarding-swiper
Step 2, After the installation then Import the plugin/ package to App.js or where you integrate the slider 
  
            import Onboarding from 'react-native-onboarding-swiper';
Step 3, Import the line to App.js or where you integrate the slider 
  
           import { View, Text, Image, TouchableOpacity,Dimensions} from 'react-native';
Step 4, Declare the bellow array of json. it is slider image source which will be display

Step 5, Add it to the return block

Step 6, Add the Skip and Next button function

Final Code

Here is the more optional properties for the intro slider like

  • bottomBarColor (optional): backgroundColor of the bottom bar. Defaults to transparent
  • showNext (optional): a bool flag indicating whether the Next button is visible. Defaults to true.
  • showNext (optional): a bool flag indicating whether the Next button is visible. Defaults to true.
  • skipLabel (optional): a string OR a React-Native component for the Skip label. Defaults to Skip.
Read More