https://github.com/hendrixgotcodes/react-native-versatile-onboarding
React-native-versatile-onboarding is a highly customizable and easy-to-integrate React Native library designed to enhance the onboarding experience for mobile applications.
https://github.com/hendrixgotcodes/react-native-versatile-onboarding
Last synced: 10 months ago
JSON representation
React-native-versatile-onboarding is a highly customizable and easy-to-integrate React Native library designed to enhance the onboarding experience for mobile applications.
- Host: GitHub
- URL: https://github.com/hendrixgotcodes/react-native-versatile-onboarding
- Owner: hendrixgotcodes
- License: mit
- Created: 2024-05-05T23:42:34.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-16T12:25:39.000Z (about 2 years ago)
- Last Synced: 2025-07-04T19:53:11.266Z (11 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-versatile-onboarding
- Size: 5.33 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
React Native Versatile Onboarding
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.
## Installation
```sh
npm install react-native-versatile-onboarding
```
## Usage
```js
import * as React from 'react';
import VersatileOnboarding from 'react-native-versatile-onboarding';
import OnboardingItem from './OnboardingItem';
import data from './data';
export default function App() {
return (
{data.map((item) => (
))}
);
}
```
## Configuration
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.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with ❤️