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

Property injected in each scence props

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