React-native-versatile-onboarding is a highly customizable and easy-to-integrate React Native library designed to enhance the onboarding experience for mobile applications. This library offers a rich set of animations, flexible layouts, and an intuitive API that caters to both developers and designers looking to create compelling, informative, and interactive onboarding flows.
npm install react-native-versatile-onboardingimport * as React from 'react';
import VersatileOnboarding from 'react-native-versatile-onboarding';
import OnboardingItem from './OnboardingItem';
import data from './data';
export default function App() {
return (
<VersatileOnboarding>
{data.map((item) => (
<OnboardingItem
Illustration={item.illustration}
description={item.description}
title={item.title}
key={item.id}
/>
))}
</VersatileOnboarding>
);
}| Property | Type | Default | Description |
|---|---|---|---|
| activePaginationColor (optional) | string | rgba(0, 0, 0, 0.159) | Set this to change the color of active pagination element. This should be a color code if set (Can be HEX, rgb, rgba or hsl value. |
| Children | ReactElement<typeof View> | Array<ReactElement<typeof View>> | No default; you must specify at least one <View /> component. | This property should be a list of <View /> components. It may be updated in the future to support additional component types. |
| Footer (optional) | ReactNode | Built-in footer component | Provides an optional footer component that can be customized or replaced. |
| footerBtnStyle (optional) | StyleProp<ViewStyle> | Built-in footer styles | Allows customization of the default styles applied to the provided footer component. |
| inAtivePaginationColor (optional) | string | rgba(0, 0, 0, 1) | Set this to change the color of inActive pagination element. This should be a color code if set (Can be HEX, rgb, rgba or hsl value. |
| onNavigate (optional) | (currentPageIndex: number) => any | undefined | Callback that is invoked when the onboarding component navigates to a new page. |
| onNavigateToEnd (optional) | ( ) => any | undefined | Callback that is invoked when the onboarding component finishes all navigation. |
| paginationContainerStyle (optional) | StyleProp<ViewStyle> | null | Allows customization of the default styles applied to the container of pagination elements. |
| PaginatorType (optional) | "dot" | "dash" | "dot" | Specifies the appearance of the pagination element, either as dots or dashes. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with ❤️