react-native-simple-onboarding

KO | EN

gitlite — search

#hacktoberfest #ai #llm #machine-learning #rust #deep-learning #linux #docker #awesome #vue #awesome-list #pytorch #mcp #open-source

react-native-simple-onboarding

(★ 103)

A simple onboarding component for React Native

File Explorer

Download Latest Version (.zip)

- Buttons.js
- PageData.js
- PageDots.js
- Paginator.js
- 1.png
- 2.png
- 3.png
.gitignore
CHANGELOG.md
index.js
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# `<Onboarding />`

Onboarding experience made a breeze.

Originally inspired by [AndroidOnboarder](https://github.com/chyrta/AndroidOnboarder).

## Quick demo

| ![](https://raw.githubusercontent.com/goshacmd/react-native-simple-onboarding/master/images/1.png) | ![](https://raw.githubusercontent.com/goshacmd/react-native-simple-onboarding/master/images/2.png) | ![](https://raw.githubusercontent.com/goshacmd/react-native-simple-onboarding/master/images/3.png) |
| --- | --- | --- |
| Adapts to bright backgrounds | and dark, too | shows the Done button |

```javascript
<Onboarding
  pages={[
    { backgroundColor: '#fff', image: <Square />, title: 'Simple Messenger UI', subtitle: 'Implemented in React Native' },
    { backgroundColor: "#fe6e58", image: <Circle />, title: 'Welcome', subtitle: 'To Earth' },
    { backgroundColor: "#999", image: <Square />, title: 'Also', subtitle: 'Mars is nice' },
  ]}
  onEnd={}
/>
```

## Install

```
npm install --save react-native-simple-onboarding
```

```javascript
import Onboarding from 'react-native-simple-onboarding';
```

## Usage

## `<Onboarding />` component

Props:

* `pages` (required): an array of onboarding pages. A page is an object of shape:
  * `backgroundColor` (required): a background color for the page
  * `image` (required): a component instance displayed at the top of the page
  * `title` (required): a string title
  * `subtitle` (required): a string subtitle
* `onEnd` (optional): a callback that is fired after the onboarding is complete
* `bottomOverlay` (optional): a bool flag indicating whether the bottom bar overlay should be shown. Defaults to `true`.
* `showSkip` (optional): a bool flag indicating whether the Skip button should be show. Defaults to `true`.
* `showNext` (optional): a bool flag indicating whether the Next arrow button should be show. Defaults to `true`.
* `showDone` (optional): a bool flag indicating whether the Done checkmark button should be show. Defaults to `true`.

## To Do

* animations
* accessibility

## License

MIT.

react-native-simple-onboarding

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

react-native-simple-onboarding

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README