React Native Onboarding Animate

React native component for onboarding processes with animation

Demo

Onboarding Animation Expo's snack

Install

Install react-native-onboarding-animate package and save into package.json:

$ npm install react-native-onboarding-animate --save

How to use?

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:

    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