stepper-react-native
v3.0.0
Published
Onboarding component
Downloads
35
Maintainers
Readme
react-native-onboarding
A simple and fully customizable React Native component that implements a onboarding stepper.
demo:
Installation
yarn
yarn add stepper-react-native
npm
npm i stepper-react-native
Usage
import {Onboarding} from 'stepper-react-native'
//components
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import Step1 from './src/components/step1';
import {Onboarding, ScreensType} from 'stepper-react-native'
export default function App() {
const steps: ScreensType[] = [{
scrollable: true,
screen: <Step1 description='This is the first' />
},
{
scrollable: false,
screen: <Step1 description='This is the second' />
},
{
scrollable: false,
screen: <Step1 description='This is the third' />
}];
const handleOnNext = () => {
console.log("ON next");
};
const handleOnBack = () => {
console.log("ON BAck");
};
const handleFinish = () => {
console.log("Oh Finish...");
};
return (
<View style={styles.container}>
<View style={styles.container}>
<Onboarding
screens={steps}
onNext={() => handleOnNext()}
onPrevious={() => handleOnBack()}
onFinish={() => handleFinish()}
/>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Props
import {ViewStyle} from "react-native";
import React from "react";
type ScreensType = {
scrollable?: boolean;
screen: React.ReactElement
}
type ActionsBoardingType = {
onFinish?: () => void;
onNext?: () => void;
onPrevious?: () => void;
footerStyle?: ViewStyle;
}
type ConfigTypes = {
colorIcons?: string;
containerStyle?: ViewStyle;
sizeIcons?: number
}
type MainPropsType = ActionsBoardingType & {
screens: ScreensType[];
config?: ConfigTypes
}