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.
|
1 |
npm install react-native-app-intro-slider --save |
Screenshot of CMD:
2. Open your project’s App.js file and import StyleSheet, View, Text & Platform component.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform } from 'react-native'; |
3. Import AppIntroSlider component from react-native-app-intro-slider library in your project.
|
1 |
import AppIntroSlider from 'react-native-app-intro-slider'; |
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.
|
1 2 3 4 5 6 7 8 |
constructor(props) { super(props); this.state = { show_Main_App: false }; } |
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.
|
1 2 3 4 5 6 7 |
on_Done_all_slides = () => { this.setState({ show_Main_App: true }); }; on_Skip_slides = () => { this.setState({ show_Main_App: true }); }; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
render() { if (this.state.show_Main_App) { return ( <View style={styles.MainContainer}> <Text style={{ textAlign: 'center', fontSize: 20, color: '#000' }}> This is your main App screen After App Intro. </Text> </View> ); } else { return ( <AppIntroSlider slides={slides} onDone={this.on_Done_all_slides} showSkipButton={true} onSkip={this.on_Skip_slides} /> ); } } |
7. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', padding: 20 }, title: { fontSize: 26, color: '#fff', fontWeight: 'bold', textAlign: 'center', marginTop: 20, }, text: { color: '#fff', fontSize: 20, }, image: { width: 200, height: 200, resizeMode: 'contain' } }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
const slides = [ { key: 'k1', title: 'Event Organizer', text: 'Best Event Organizers', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/calendar.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF1744', }, { key: 'k2', title: 'Weather Reports', text: 'Latest Weather Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/cloud.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#D500F9', }, { key: 'k3', title: 'Technology Informations', text: 'Latest Technology Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/computer.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#2979FF', }, { key: 'k4', title: 'Flight Bookings', text: ' Best Deals on Flights', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/flight.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#1DE9B6', }, { key: 'k5', title: 'Restaurant Bookings', text: ' 20% off on first Restaurant booking', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/restaurants.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF3D00', }, ]; |
9. Complete source code for App.js file class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform } from 'react-native'; import AppIntroSlider from 'react-native-app-intro-slider'; export default class App extends Component { constructor(props) { super(props); this.state = { show_Main_App: false }; } on_Done_all_slides = () => { this.setState({ show_Main_App: true }); }; on_Skip_slides = () => { this.setState({ show_Main_App: true }); }; render() { if (this.state.show_Main_App) { return ( <View style={styles.MainContainer}> <Text style={{ textAlign: 'center', fontSize: 20, color: '#000' }}> This is your main App screen After App Intro. </Text> </View> ); } else { return ( <AppIntroSlider slides={slides} onDone={this.on_Done_all_slides} showSkipButton={true} onSkip={this.on_Skip_slides} /> ); } } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', padding: 20 }, title: { fontSize: 26, color: '#fff', fontWeight: 'bold', textAlign: 'center', marginTop: 20, }, text: { color: '#fff', fontSize: 20, }, image: { width: 200, height: 200, resizeMode: 'contain' } }); const slides = [ { key: 'k1', title: 'Event Organizer', text: 'Best Event Organizers', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/calendar.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF1744', }, { key: 'k2', title: 'Weather Reports', text: 'Latest Weather Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/cloud.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#D500F9', }, { key: 'k3', title: 'Technology Informations', text: 'Latest Technology Reports', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/computer.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#2979FF', }, { key: 'k4', title: 'Flight Bookings', text: ' Best Deals on Flights', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/flight.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#1DE9B6', }, { key: 'k5', title: 'Restaurant Bookings', text: ' 20% off on first Restaurant booking', image: { uri: 'https://reactnativecode.com/wp-content/uploads/2019/04/restaurants.png', }, titleStyle: styles.title, textStyle: styles.text, imageStyle: styles.image, backgroundColor: '#FF3D00', }, ]; |
Screenshots:
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.
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.
thank you
Welcome bro 🙂 .
great work .
may God bless you for your kind effort
Thanks bro 🙂 .
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
Like PayTM or google pay UI ?
what if I don’t want backgroundColor and everything there, like the title, image, etc.
I was given a Custom made image with everything in it.
So is it possible to just have a background image and nothing else
Yes you can do it .
How do I do that?
I tried leaving everything empty, but the Image wasn’t still fullscreen.
Instead of a background color, I wanted a background Image
Okay I got it.
Thanks
I want the skip button to be display at the top right corner of the screen. How ?
TypeError: undefined is not an object (evaluating ‘data.length’)
How can I fix this error?