Skip to content

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

Notifications You must be signed in to change notification settings

instamobile/react-native-walkthrough

Repository files navigation

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

educational walkthrough flow react native react native walkthrough react native walkthrough onboarding flow

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,
};

<WalkthroughScreen
  appConfig={WalkthroughAppConfig}
  appStyles={DynamicAppStyles}
/>

Coded with ❤️ by Instamobile and Swift Projects.

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published