https://github.com/instamobile/react-native-walkthrough

React Native Walkthrough User Onboarding Flow to start your react native app development
https://github.com/instamobile/react-native-walkthrough

android expo ios react-native

Last synced: 3 months ago
JSON representation

React Native Walkthrough User Onboarding Flow to start your react native app development

• Host: GitHub
• URL: https://github.com/instamobile/react-native-walkthrough
• Owner: instamobile
• Created: 2019-01-20T21:30:24.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T23:20:36.000Z (over 1 year ago)
• Last Synced: 2023-07-12T00:28:59.263Z (over 1 year ago)
• Topics: android, expo, ios, react-native
• Language: JavaScript
• Homepage: https://instamobile.io
• Size: 25.8 MB
• Stars: 41
• Watchers: 6
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Walkthrough Flow in React Native

Check our this implementation of a walkthrough flow in React Native. Beautiful design, clean and extensible code and modularized flow.

## Features

- Highly customizable source code

- Unlimited number of steps

- Optimized for both iOS and Android

## Previews







## Get Started

```

const WalkthroughAppConfig = {

  onboardingConfig: {

    walkthroughScreens: [

      {

        icon: require("../assets/react-native.png"),

        title: "React Native Walkthrough",

        description: "Welcome your users with a beautiful app walkthrough.",

      },

      {

        icon: require("../assets/educate.png"),

        title: "Educate",

        description:

          "Showcase features to new users so that they get to love your app.",

      },

      {

        icon: require("../assets/bell.png"),

        title: "Get Notified",

        description: "Describe the value proposition of each core feature.",

      },

    ],

  },

};

const lightColorSet = {

  mainThemeBackgroundColor: "#ffffff",

  mainThemeForegroundColor: "#788eec",

};

const darkColorSet = {

  mainThemeBackgroundColor: "#121212",

  mainThemeForegroundColor: "#788eec",

};

const colorSet = {

  ...lightColorSet,

  light: lightColorSet,

  dark: darkColorSet,

  "no-preference": lightColorSet,

};

const DynamicAppStyles = {

  colorSet,

};

```

Coded with ❤️ by Instamobile and Swift Projects.