react-native-onboarding-switch v2.0.0

react-native-onboarding-switch

A small react-native HOC(Higher Order Component) to show your onboarding screens only the first time the user opens your app

Usage

import React from "react";
import { View, Text, ActivityIndicator, TouchableHighlight } from "react-native";
import withOnboarding from "react-native-onboarding-switch";

const App = () => (
  <View>
    <Text>Hello App</Text>
  </View>
);

const Onboarding = ({ onDone }) => (
  <TouchableHighlight onPress={onDone}>
    <Text>Finish Onboarding</Text>
  </TouchableHighlight>
);

const Loading = () => <ActivityIndicator />;

export default withOnboarding(App, Onboarding, Loading);

Resetting

import React from "react";
import { Text, TouchableHighlight } from "react-native";
import {resetOnboarding} from "react-native-onboarding-switch";

const resetButton = () => (
  <TouchableHighlight onPress={resetOnboarding}>
    <Text>Reset Onboarding</Text>
  </TouchableHighlight>
)

Caveats

the HOC uses react-native's AsyncStorage under the hood. To store the state of the onboarding process the storage key @onboarding-switch/onboarding-status is used. It is not advised to access this key.