# react-native-onboarding-animate

> On boarding component with animation

Latest version **1.2.4** (published 2021-01-23) · MIT license · 0 weekly downloads

## Install

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

## 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.2.4 |
| Published | 2021-01-23 |
| First published | 2018-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Ambi Studio |
| Maintainers | hieunc |
| Keywords | react-native, onboarding, animation, onboarding, animate, onboarding |

## Links

- npm: https://www.npmjs.com/package/react-native-onboarding-animate
- Repository: https://github.com/ambistudio/react-native-onboarding-animate
- Homepage: https://github.com/ambistudio/react-native-onboarding-animate#readme
- Issues: https://github.com/ambistudio/react-native-onboarding-animate/issues
- npm.io page: https://npm.io/package/react-native-onboarding-animate

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.2.4 (latest) — 2021-01-23
- 1.2.3 — 2021-01-22
- 1.2.2 — 2021-01-22
- 1.2.1 — 2021-01-21
- 1.2.0 — 2021-01-21
- 1.1.0 — 2019-02-10
- 1.0.0 — 2019-02-08
- 0.10.0 — 2018-06-30
- 0.9.0 — 2018-06-24
- 0.8.0 — 2018-06-23
- 0.7.0 — 2018-06-23
- 0.6.0 — 2018-06-23
- 0.5.0 — 2018-06-23
- 0.4.0 — 2018-06-23
- 0.3.0 — 2018-06-23
- … 3 more at https://npm.io/package/react-native-onboarding-animate/versions

## README

# React Native Onboarding Animate
React native component for onboarding processes with animation

## Demo

[Onboarding Animation Expo's snack](https://snack.expo.io/@hieunc/on-boarding-animation)

## Install

Install `react-native-onboarding-animate` package and save into `package.json`:
```ssh
$ npm install react-native-onboarding-animate --save
```

## How to use?

```javascript
import React, { Component } from 'react';

import OnboardingAnimate from 'react-native-onboarding-animate';
import {
  FirstScene,
  SecondScene,
  ThirdScene
} from './ExampleScenes';

export default class App extends Component {
  
  render() {

    // Define scenes, it will be displayed in order
    let scenes = [
      {
        component: FirstScene,
        backgroundColor: 'yellow'
      }, {
        component: SecondScene,
        backgroundColor: 'orange'
      }, {
        component: ThirdScene,
        backgroundColor: 'red'
      }
    ];

    return <OnboardingAnimate
        scenes={scenes}
        enableBackgroundColorTransition={true}
    />;
  }
}

```

### animatedValue

Each of scence will be injected in `this.props` with an `animatedValue` with `inputRange = [0, windowWidth]`. This can be used for any animation within the scence by using interpolate. For example:

```javascript
    var animateValue = this.props.animatedValue.interpolate({
        inputRange: [0, windowWidth],
        outputRange: [0, 10]
    })
```

(Please see actual code in the Expo example, file `./ExampleScenes/FirstScene.js` line `19` )

## Properties

| Name | Type | Default Value | Definition |
| ---- | ---- | ------------- | ---------- |
| scenes | array of object { component: (required), backgroundColor: (optional) } | - | component: the view that will be displayed, backgroundColor: color of the view's background that will be animated
| enableBackgroundColorTransition | boolean | undefined | Set to `true` to animate background color when transitining view/component
| activeColor | string (hex, rgba, etc.) | `rgba(32, 119, 336, 1)` | color of active indicator, `Continue` button background color
| inactiveColor | string (hex, rgba, etc.) |  `rgba(0, 0, 0, 0.2)` | color of inactive indicator


### Property injected in each scence `props`

| Name | Type | Default Value | Definition |
| ---- | ---- | ------------- | ---------- |
| animatedValue | interpolate value of Animated.Value | inputRange: [0, windowWidth] | an animated value, use for animation within a page by using `this.props.animatedValue.interpolate`

## Transpile

Run the below command to transpile typescript to javascript

```
$ tsc

// yarn or npm
$ yarn build
$ npm run build
```

## Todo

- Test on android
- Create tests

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