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