├── .DS_Store ├── .expo-shared └── assets.json ├── .expo ├── README.md └── devices.json ├── .gitignore ├── .idea ├── .gitignore ├── modules.xml ├── react-native-walkthrough.iml └── vcs.xml ├── App.js ├── README.md ├── app.json ├── assets ├── adaptive-icon.png ├── bell.png ├── educate.png ├── favicon.png ├── home.png ├── icon.png ├── plane.png ├── react-native.png └── splash.png ├── babel.config.js ├── package.json ├── src ├── DynamicAppStyles.js ├── WalkthroughAppConfig.js └── screens │ └── WalkthroughScreen │ ├── WalkthroughScreen.js │ └── styles.js └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/.DS_Store -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.expo/README.md: -------------------------------------------------------------------------------- 1 | > Why do I have a folder named ".expo" in my project? 2 | The ".expo" folder is created when an Expo project is started using "expo start" command. 3 | > What do the files contain? 4 | - "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds. 5 | - "settings.json": contains the server configuration that is used to serve the application manifest. 6 | > Should I commit the ".expo" folder? 7 | No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine. 8 | Upon project creation, the ".expo" folder is already added to your ".gitignore" file. 9 | -------------------------------------------------------------------------------- /.expo/devices.json: -------------------------------------------------------------------------------- 1 | { 2 | "devices": [] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ios/build 2 | android/app/build 3 | ios/Pods 4 | android/build 5 | node_modules 6 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Datasource local storage ignored files 5 | /dataSources/ 6 | /dataSources.local.xml 7 | # Editor-based HTTP Client requests 8 | /httpRequests/ 9 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/react-native-walkthrough.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | // import Appearance from 'react-native' 3 | // import { AppearanceProvider, Appearance } from "react-native-appearance"; 4 | import WalkthroughScreen from "./src/screens/WalkthroughScreen/WalkthroughScreen"; 5 | import WalkthroughAppConfig from "./src/WalkthroughAppConfig"; 6 | import DynamicAppStyles from "./src/DynamicAppStyles"; 7 | export default function App() { 8 | // const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme()); 9 | 10 | // useEffect(() => { 11 | // Appearance.addChangeListener(({ colorScheme }) => { 12 | // setColorScheme(colorScheme); 13 | // }); 14 | // }) 15 | return ( 16 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Walkthrough Flow in React Native 2 | 3 | Check our this implementation of a walkthrough flow in React Native. Beautiful design, clean and extensible code and modularized flow. 4 | 5 | ## Features 6 | 7 | - Highly customizable source code 8 | - Unlimited number of steps 9 | - Optimized for both iOS and Android 10 | 11 | ## Previews 12 | 13 | educational walkthrough flow react native 14 | react native walkthrough 15 | react native walkthrough onboarding flow 16 | 17 | ## Get Started 18 | 19 | ``` 20 | const WalkthroughAppConfig = { 21 | onboardingConfig: { 22 | walkthroughScreens: [ 23 | { 24 | icon: require("../assets/react-native.png"), 25 | title: "React Native Walkthrough", 26 | description: "Welcome your users with a beautiful app walkthrough.", 27 | }, 28 | { 29 | icon: require("../assets/educate.png"), 30 | title: "Educate", 31 | description: 32 | "Showcase features to new users so that they get to love your app.", 33 | }, 34 | { 35 | icon: require("../assets/bell.png"), 36 | title: "Get Notified", 37 | description: "Describe the value proposition of each core feature.", 38 | }, 39 | ], 40 | }, 41 | }; 42 | 43 | const lightColorSet = { 44 | mainThemeBackgroundColor: "#ffffff", 45 | mainThemeForegroundColor: "#788eec", 46 | }; 47 | 48 | const darkColorSet = { 49 | mainThemeBackgroundColor: "#121212", 50 | mainThemeForegroundColor: "#788eec", 51 | }; 52 | 53 | const colorSet = { 54 | ...lightColorSet, 55 | light: lightColorSet, 56 | dark: darkColorSet, 57 | "no-preference": lightColorSet, 58 | }; 59 | 60 | const DynamicAppStyles = { 61 | colorSet, 62 | }; 63 | 64 | 68 | 69 | ``` 70 | 71 | Coded with ❤️ by Instamobile and Swift Projects. 72 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-walkthrough", 4 | "slug": "react-native-walkthrough", 5 | "version": "2.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/bell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/bell.png -------------------------------------------------------------------------------- /assets/educate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/educate.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/favicon.png -------------------------------------------------------------------------------- /assets/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/home.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/icon.png -------------------------------------------------------------------------------- /assets/plane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/plane.png -------------------------------------------------------------------------------- /assets/react-native.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/react-native.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dopebase/react-native-walkthrough/43d02ec905f9e9c78aa690ba4e19351ca0832c81/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "walkthrough", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios" 9 | }, 10 | "dependencies": { 11 | "expo": "^49.0.2", 12 | "expo-status-bar": "^1.6.0", 13 | "expo-updates": "^0.18.9", 14 | "prop-types": "^15.8.1", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-native": "^0.72.2", 18 | "react-native-app-intro-slider": "^4.0.4" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.22.8" 22 | }, 23 | "private": true 24 | } 25 | -------------------------------------------------------------------------------- /src/DynamicAppStyles.js: -------------------------------------------------------------------------------- 1 | const lightColorSet = { 2 | mainThemeBackgroundColor: "#ffffff", 3 | mainThemeForegroundColor: "#788eec", 4 | }; 5 | 6 | const darkColorSet = { 7 | mainThemeBackgroundColor: "#121212", 8 | mainThemeForegroundColor: "#788eec", 9 | }; 10 | 11 | const colorSet = { 12 | ...lightColorSet, 13 | light: lightColorSet, 14 | dark: darkColorSet, 15 | "no-preference": lightColorSet, 16 | }; 17 | 18 | const StyleDict = { 19 | colorSet, 20 | }; 21 | 22 | export default StyleDict; 23 | -------------------------------------------------------------------------------- /src/WalkthroughAppConfig.js: -------------------------------------------------------------------------------- 1 | const WalkthroughAppConfig = { 2 | onboardingConfig: { 3 | walkthroughScreens: [ 4 | { 5 | icon: require("../assets/react-native.png"), 6 | title: "React Native Walkthrough", 7 | description: "Welcome your users with a beautiful app walkthrough.", 8 | }, 9 | { 10 | icon: require("../assets/educate.png"), 11 | title: "Educate", 12 | description: 13 | "Showcase features to new users so that they get to love your app.", 14 | }, 15 | { 16 | icon: require("../assets/bell.png"), 17 | title: "Get Notified", 18 | description: "Describe the value proposition of each core feature.", 19 | }, 20 | ], 21 | }, 22 | }; 23 | 24 | export default WalkthroughAppConfig; 25 | -------------------------------------------------------------------------------- /src/screens/WalkthroughScreen/WalkthroughScreen.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Image, Text, useColorScheme } from "react-native"; 3 | import PropTypes from "prop-types"; 4 | import AppIntroSlider from "react-native-app-intro-slider"; 5 | import dynamicStyles from "./styles"; 6 | 7 | const WalkthroughScreen = (props) => { 8 | const appConfig = props.appConfig; 9 | const appStyles = props.appStyles; 10 | const colorScheme = useColorScheme(); 11 | const styles = dynamicStyles(appStyles, colorScheme); 12 | 13 | const slides = appConfig.onboardingConfig.walkthroughScreens.map( 14 | (screenSpec, index) => { 15 | return { 16 | key: `${index}`, 17 | text: screenSpec.description, 18 | title: screenSpec.title, 19 | image: screenSpec.icon, 20 | }; 21 | } 22 | ); 23 | 24 | const _renderItem = ({ item, dimensions }) => ( 25 | 26 | 32 | 33 | {item.title} 34 | {item.text} 35 | 36 | 37 | ); 38 | 39 | return ( 40 | 49 | ); 50 | }; 51 | 52 | WalkthroughScreen.propTypes = { 53 | appStyles: PropTypes.object, 54 | appConfig: PropTypes.object, 55 | }; 56 | 57 | export default WalkthroughScreen; 58 | -------------------------------------------------------------------------------- /src/screens/WalkthroughScreen/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const dynamicStyles = (appStyles, colorScheme) => { 4 | return StyleSheet.create({ 5 | title: { 6 | fontSize: 25, 7 | fontWeight: 'bold', 8 | textAlign: 'center', 9 | paddingBottom: 25, 10 | color: 'white', 11 | }, 12 | text: { 13 | fontSize: 18, 14 | textAlign: 'center', 15 | color: 'white', 16 | paddingLeft: 10, 17 | paddingRight: 10, 18 | }, 19 | image: { 20 | width: 100, 21 | height: 100, 22 | marginBottom: 60, 23 | tintColor: 'white', 24 | }, 25 | container: { 26 | flex: 1, 27 | justifyContent: 'center', 28 | alignItems: 'center', 29 | backgroundColor: appStyles.colorSet[colorScheme].mainThemeForegroundColor, 30 | }, 31 | button: { 32 | fontSize: 18, 33 | color: 'white', 34 | marginTop: 10, 35 | }, 36 | }); 37 | }; 38 | 39 | export default dynamicStyles; 40 | --------------------------------------------------------------------------------