# react-native-onboarding-screen

> Onboarding screen for React Native.

Latest version **1.0.3** (published 2019-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-onboarding-screen
pnpm add react-native-onboarding-screen
yarn add react-native-onboarding-screen
bun add react-native-onboarding-screen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-01-19 |
| First published | 2018-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 4.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Hugh Bellamy |
| Maintainers | hughbe |
| Keywords | react-native, react-component, react-native-component, onboarding, react-onboarding |

## Links

- npm: https://www.npmjs.com/package/react-native-onboarding-screen
- Repository: https://github.com/hughbe/react-native-onboarding
- Issues: https://github.com/hughbe/react-native-onboarding/issues
- npm.io page: https://npm.io/package/react-native-onboarding-screen

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.2.0
- [react-native-page-control](https://npm.io/package/react-native-page-control.md) ^1.1.1

## Recent versions

- 1.0.3 (latest) — 2019-01-19
- 1.0.2 — 2019-01-19
- 1.0.1 — 2018-07-25
- 1.0.0 — 2018-07-22

## README

# react-native-onboarding

> Onboarding screen for React Native.

## Installation

```bash
npm install --save react-native react-native-onboarding-screen
```

## Usage

### Result

<div align="center">
    <img src="screenshots/1.png" height="500" />
    <img src="screenshots/2.png" height="500" />
    <img src="screenshots/3.png" height="500" />
</div>

### Code

```javascript
import React from 'react';
import Onboarding from 'react-native-onboarding-screen';

export default class App extends React.Component {
    render() {
        const Pages = [
                {
                    title: 'Welcome',
                    subtitle: 'to the Oxford Union app. Here you can browse the term card and engage with the Union, all in one place.'
                },
                {
                    title: 'Get Engaged',
                    subtitle: 'The Oxford Union app integrates closely with Facebook. Don\'t worry, we won\'t post anything to your profile.',
                    action: {
                        title: "Login to Facebook",
                        onPress: this.showFacebookLogin
                    }
                },
                {
                    title: "Great",
                    subtitle: "That's all for now. As you use the app, we'll learn about the events you like and use this to personalize your experience.",
                    action: {
                        title: "Let's Get Started",
                        onPress: this.finishOnboarding
                    }
                }
        ];
        return (
            <Onboarding
                backgroundImage={require('./Resources/onboarding.jpg')}
                pages={Pages}
            />
        );
    }
}

```

---
_Source: https://npm.io/package/react-native-onboarding-screen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._