So, let’s get started.<\/p>\n\n\n\n
1. Create your React Native app:<\/h2>\n\n\n\n
For the purpose of this tutorial, we are going to create our React Native app using cli. So, first we create a folder and just call it “projects” (feel free to rename yours) and then we will “cd” to that folder and run the following command:<\/p>\n\n\n\n
npm install -g react-native-cli<\/code><\/pre>\n\n\n\nSo this installs React Native globally in our folder. Next, we init our folder like so:<\/p>\n\n\n\n
react-native init [new_folder_name]<\/code><\/pre>\n\n\n\n*WARNING:<\/p>\n\n\n\n
Currently, here you will get an error with npm package which will cause the process to break. This appears to be bug with npm package. <\/p>\n\n\n\n
*What You Can do:<\/p>\n\n\n\n
Delete the node_modules folder and run the following command:<\/p>\n\n\n\n
yarn install<\/code><\/pre>\n\n\n\nThis should resolve the issue<\/p>\n\n\n\n
2. Add dependencies to Our Onboarding Screen<\/h2>\n\n\n\n
Next, we will add the following dependencies:<\/p>\n\n\n\n
yarn add react-native-app-intro-slider \/\/our intro slider library\nyarn add react-native-vector-icons \/\/Icons\nyarn add @react-native-async-storage\/async-storage \nyarn add react-native-responsive-screen \/\/For screen responsiveness\nyarn add react-native-reanimated\nyarn add react-native-safe-area-context\nyarn add react-navigation\nyarn add react-navigation-stack\nyarn add react-native-screens\nyarn add react-native-gesture-handler<\/code><\/pre>\n\n\n\nFor iOS configuration, you need to register these dependencies the pod file so that iOS can understand them.<\/p>\n\n\n\n
cd iOS\npod install\ncd ..\nreact-native run-iOS \/\/ For iOS\nreact-native run-android \/\/For Android<\/code><\/pre>\n\n\n\n3. Create a file called Intro and add the following code:<\/h2>\n\n\n\nimport React, {Component} from 'react';\nimport {Text, View, Image, StatusBar} from 'react-native';\nimport Icon from 'react-native-vector-icons\/Ionicons';\nimport AppIntroSlider from 'react-native-app-intro-slider';\nimport AsyncStorage from '@react-native-async-storage\/async-storage';\nimport {\n widthPercentageToDP as wp,\n heightPercentageToDP as hp,\n} from 'react-native-responsive-screen';\nIcon.loadFont();\n\nconst slides = [\n {\n key: 1,\n title: 'You Love Animes?',\n image: require('image.png'),\n backgroundColor: '#000',\n },\n {\n key: 2,\n title: 'We know that.',\n image: require('image.png'),\n },\n {\n key: 3,\n title: 'Search Anime Movies ...',\n image: require('image.png'),\n },\n {\n key: 4,\n title: 'And Series, too.',\n image: require('image.png'),\n },\n];\n\nclass Intro extends Component {\n\n}\n\nexport default Intro<\/code><\/pre>\n\n\n\nLet’s explain what’s happening here, shall we.<\/p>\n\n\n\n
Here, we adding the number of slides we want to have in our application as well as the respective images and display texts. Go ahead and your own image and desired text.<\/p>\n\n\n\n
Next, we want to render these images and texts that we have just defined for our slides. So we add the following code:<\/p>\n\n\n\n
\n_renderItem = ({item}) => {\n return (\n <View\n style={{\n flex: 1,\n flexDirection: 'column',\n flexWrap: 'nowrap',\n height: hp('100%'),\n width: wp('100%'),\n justifyContent: 'center',\n backgroundColor: item.backgroundColor,\n alignItems: 'center',\n }}>\n <StatusBar barStyle=\"light-content\" backgroundColor=\"#000\" \/>\n <View style={styles.overlay} \/>\n <Text\n style={{\n textAlign: 'center',\n fontSize: 45,\n color: '#fff',\n position: 'absolute',\n top: 650,\n zIndex: 3,\n fontWeight: 'bold',\n }}>\n {item.title}\n <\/Text>\n <Image\n style={{width: '100%', height: '100%', resizeMode: 'cover'}}\n source={item.image}\n \/>\n <\/View>\n );\n };<\/code><\/pre>\n\n\n\nNotice here that we have an View tag over which we added some dark overlay:<\/p>\n\n\n\n
<View style={styles.overlay} \/><\/code><\/pre>\n\n\n\nThis subtle dark overlay just helps to give our displayed text some level of prominence so that it can be readable and not swallowed by the background image.<\/p>\n\n\n\n
<\/p>\n\n\n\n
4. Define Sliding Button Styles<\/h2>\n\n\n\n
Now that we have successfully added our slide, we need to set icons for next slide indicator, an option to switch, which is denoted by a cancel icon as well a check-mark icon that shows the user that they have seen all the slide images. So we add the following code:<\/p>\n\n\n\n
_renderNextButton = () => {\n return (\n <View style={styles.buttonCircle}>\n <Icon\n name=\"arrow-forward-circle-outline\"\n color=\"rgba(255, 255, 255, .6)\"\n size={45}\n \/>\n <\/View>\n );\n };\n _renderDoneButton = () => {\n return (\n <View style={styles.buttonCircle}>\n <Icon name=\"md-checkmark\" color=\"green\" size={45} \/>\n <\/View>\n );\n };\n _renderSkipButton = () => {\n return (\n <View style={styles.buttonCircle}>\n <Icon name=\"close-circle-outline\" color=\"#800000\" size={45} \/>\n <\/View>\n );\n };<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
5. What Happens When We’re Done Viewing the Slides?<\/h2>\n\n\n\n
Yes, we need to check that right?<\/p>\n\n\n\n
_onDone = () => {\n const items = [['intro', 'intro']];\n AsyncStorage.multiSet(items);\n this.props.navigation.navigate('Home');\n };<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Ok. So when we’re done viewing the slides, we want to move on to the next activity and set a value in AsyncStorage <\/a>so that WE DO NOT ALWAYS HAVE TO VIEW THE INTRO SLIDER EVERY TIME WE START THE APP.<\/strong> You got that right? Yes, that’s the above code is for and we will properly check that later.<\/p>\n\n\n\n<\/p>\n\n\n\n
6. Render Display<\/h2>\n\n\n\n
Let us render all these displays and styles that we have just added like so:<\/p>\n\n\n\n
render() {\n return (\n <AppIntroSlider\n keyExtractor={(item, index) => index.toString()}\n showSkipButton={true}\n renderItem={this._renderItem}\n data={slides}\n onDone={this._onDone}\n renderDoneButton={this._renderDoneButton}\n renderNextButton={this._renderNextButton}\n renderSkipButton={this._renderSkipButton}\n \/>\n );\n }<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n![\"software](\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/08\/Simulator-Screen-Shot-iPhone-12-2021-07-29-at-15.54.17-473x1024.png\")
<\/figure>\n\n\n\nFull code for Intro.js<\/h2>\n\n\n\nimport React, {Component} from 'react';\nimport {Text, View, Image, StatusBar, StyleSheet} from 'react-native';\nimport Icon from 'react-native-vector-icons\/Ionicons';\nimport AppIntroSlider from 'react-native-app-intro-slider';\nimport AsyncStorage from '@react-native-async-storage\/async-storage';\nimport {\n widthPercentageToDP as wp,\n heightPercentageToDP as hp,\n} from 'react-native-responsive-screen';\nIcon.loadFont();\n\nconst slides = [\n {\n key: 1,\n title: 'You Love Animes?',\n image: require('image.jpg'),\n backgroundColor: '#000',\n },\n {\n key: 2,\n title: 'We know that.',\n image: require('image.jpg'),\n },\n {\n key: 3,\n title: 'Search Anime Movies ...',\n image: require('image.jpg'),\n },\n {\n key: 4,\n title: 'And Series, too.',\n image: require('image.jpg'),\n },\n];\n\nclass Intro extends Component {\n \n _renderItem = ({item}) => {\n return (\n <View\n style={{\n flex: 1,\n flexDirection: 'column',\n flexWrap: 'nowrap',\n height: hp('100%'),\n width: wp('100%'),\n justifyContent: 'center',\n backgroundColor: item.backgroundColor,\n alignItems: 'center',\n }}>\n <StatusBar barStyle=\"light-content\" backgroundColor=\"#000\" \/>\n <View style={styles.overlay} \/>\n <Text\n style={{\n textAlign: 'center',\n fontSize: 45,\n color: '#fff',\n position: 'absolute',\n top: 650,\n zIndex: 3,\n fontWeight: 'bold',\n }}>\n {item.title}\n <\/Text>\n <Image\n style={{width: '100%', height: '100%', resizeMode: 'cover'}}\n source={item.image}\n \/>\n <\/View>\n );\n };\n _renderNextButton = () => {\n return (\n <View>\n <Icon\n name=\"arrow-forward-circle-outline\"\n color=\"rgba(255, 255, 255, .6)\"\n size={45}\n \/>\n <\/View>\n );\n };\n _renderDoneButton = () => {\n return (\n <View>\n <Icon name=\"md-checkmark\" color=\"green\" size={45} \/>\n <\/View>\n );\n };\n _renderSkipButton = () => {\n return (\n <View>\n <Icon name=\"close-circle-outline\" color=\"#800000\" size={45} \/>\n <\/View>\n );\n };\n _onDone = () => {\n const items = [['intro', 'intro']];\n AsyncStorage.multiSet(items);\n this.props.navigation.navigate('Home');\n };\n render() {\n return (\n <AppIntroSlider\n keyExtractor={(item, index) => index.toString()}\n showSkipButton={true}\n renderItem={this._renderItem}\n data={slides}\n onDone={this._onDone}\n renderDoneButton={this._renderDoneButton}\n renderNextButton={this._renderNextButton}\n renderSkipButton={this._renderSkipButton}\n \/>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n overlay: {\n ...StyleSheet.absoluteFillObject,\n backgroundColor: 'rgba(0, 0, 0, 0.8)',\n },\n})\n\nexport default Intro;\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
7. Next Let’s create our Home.js page<\/h2>\n\n\n\n
We’ll just create a basic Home page here just for the purpose of this tutorial<\/p>\n\n\n\n
import React, { Component } from 'react';\nimport {View, Text} from 'react-native';\n\nclass Home extends Component {\nrender(){\nreturn(\n<View>\n<Text>Hello Home!<\/Text>\n<\/View>\n)\n}\n}\n\nexport default Home;<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
8. Let’s Check if the Intro Slider Already Loaded<\/h2>\n\n\n\n
So, here we will properly check if the App intro slider has already loaded so that we can ensure that it loads only once. We will create a file called CheckLoad.js and add the following code:<\/p>\n\n\n\n
import React, { Component } from \"react\";\nimport { View, ActivityIndicator } from 'react-native';\nimport AsyncStorage from '@react-native-async-storage\/async-storage';\n\n\nclass CheckLoad extends Component {\n\n checkToken = async () => {\n const token = await AsyncStorage.getItem('intro');\n if (token) {\n this.props.navigation.navigate('Home');\n } else {\n this.props.navigation.navigate('Intro');\n }\n };\n \n componentDidMount() {\n this.checkToken();\n }\n\n render(){\n return(\n <View>\n <ActivityIndicator\n style={{\n position: 'absolute',\n flexDirection: 'row',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n marginTop: 350,\n }}\n size=\"large\"\n color=\"#0275d8\"\n \/>\n <\/View>\n )\n }\n}\n\nexport default CheckLoad;<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
9. What about Routing For Software Application?<\/h2>\n\n\n\n
Next, we need to handle routing for our application and for that we have already added dependencies for navigation and stack navigation. So let’s add the following code for our Stack Navigation<\/a>:<\/p>\n\n\n\nimport React, {Component} from 'react';\nimport {createAppContainer} from 'react-navigation';\nimport {createStackNavigator} from 'react-navigation-stack';\nimport CheckLoad from '..\/screens\/CheckLoad';\nimport Home from '..\/screens\/Home';\n\n\nclass Stack extends Component {\n render() {\n return <AppContainer \/>;\n }\n}\n\nexport default Stack;\n\nconst AppStackNavigator = createStackNavigator(\n {\n CheckLoad: {\n screen: CheckLoad,\n navigationOptions: {\n headerShown: false,\n },\n },\n Intro: {\n screen: Intro,\n navigationOptions: {\n headerShown: false,\n },\n },\n Home: {\n screen: Home,\n navigationOptions: {\n headerTitle: 'Home',\n headerLeft: () => {\n return null;\n },\n headerStyle: {\n backgroundColor: '#000',\n },\n headerTintColor: '#fff',\n },\n },\n \n {\n initialRouteName: 'CheckLoad',\n },\n);\n\nconst AppContainer = createAppContainer(AppStackNavigator);\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
10. Modify Our App Entry File<\/h2>\n\n\n\n
Next, we will modify our App.js file. Every React Native project will have a default App.js. Let us delete the custom codes in that file and add the following:<\/p>\n\n\n\n
\nimport React, { Component } from 'react';\nimport Stack from '.\/Stack';\n\n class App extends Component {\n render(){\n return(\n <Stack \/>\n )\n }\n }\nexport default App;<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Congratulations, You have successfully added React Native App Intro Slider to your software application!<\/h2>\n\n\n\n