React Native Create App Intro Slider Welcome Walk-through Screen

App Intro Slider is a group of multiple slides shows at the application start time in mobile phones. App Intro Slider contain useful information in picture format about application like what is the most useful nature of application. In react native we can create App Intro Slider using react-native-app-intro-slider NPM GitHub library. I am telling you guys this library is awesome and if you want to make cool app intro slider in react native for both android and iOS devices this should be your choice. This library comes with a ton of features to customize the app intro slider. We can put our own icons, title text, description text, set background color and style the text. So let’s get started 🙂 .

Note: Icon image used in current project is in white color so it may be not display properly on white background screen.

Contents in this project React Native Create App Intro Slider Welcome Walk-through Screen Android iOS Tutorial:

1. Open your react native project folder in Command Prompt or Terminal and execute below NPM command to install react-native-app-intro-slider library.

Screenshot of CMD:

There is no need to execute react-native link command, because this library is developed in pure react native JavaScript code.

2. Open your project’s App.js file and import StyleSheet, View, Text & Platform component.

3. Import AppIntroSlider component from react-native-app-intro-slider library in your project.

4. Create constructor() in class. In constructor() we would make a State named as show_Main_App containing Boolean value. We would set its default value as false. This state is used to manage App intro slider and real application screen scenario. If state value is false then the App intro slider will display on screen and if its value is true then the application main screen will display.

5. Create 2 functions named as on_Done_all_slides() and on_Skip_slides(). In both functions we would change the state value from false to true. We would call these functions on slider Done & Skip buttons.

6. Put a IF condition with show_Main_App state in render’s block. If the state value is true then it will show us the main application screen and if the state value is false then it will display the App intro slider screen. In the Else part we would create the AppIntroSlider component and call the both functions on onDone & onSkip prop.

slides : Here we calls the slides constant array created after styles.

7. Creating Style.

8. Creating a constant array named as slides. This array will contain all information about slides. We have to create the array at the end of code after declaring Style sheet code. because if we create the array before declaring style sheet code then the styles will not not be able to call successfully in slides.

  • key : Should be unique for each slide.
  • title : Title of slide.
  • text : Description text of slide.
  • image : Pass the image Path in slide here.
  • titleStyle : Call the title style here.
  • textStyle : Description text style.
  • imageStyle : Call the image style.
  • backgroundColor : Define background color HEX color code format.

9. Complete source code for App.js file class.

Screenshots:

React Native Create App Intro Slider Welcome Walk-through Screen

10 Comments

  1. thank your , but i need custom design in every sliders .

    • Rahul you can pretty much design your own custom design using the slider or you can read its props for more customization.

  2. hi . on which hosting platform you hosted this website .for hosting how much you are paying for an year . i am using godaddy . their price for one year hosting is 4788 & domain name need extra

    thank you for the support

    • Jithin i am hosting my website on Digital Ocean. Its a cloud hosting platform, it cost me 5$ per month + TAX so it would be about 550 rupees per month for me. If you are interested in Joining digital ocean i will give you 5$ free coupon code to try their service. The domain name cost me about 1000 rupees per year. And one more thing you can host approx more than 20 websites on a single 5$ droplet.

  3. great work .
    may God bless you for your kind effort

  4. bro i really appreciate what you are doing. but help me with something,please upload a ui design for digital wallet like app with scan and pay and wallet and with some additional functionality and login page with numbers. if thats not too much for you. #justARequest #please

Leave a Reply

Your email address will not be published. Required fields are marked *