Animation when Component is mount

Install

Use

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Arrival from 'react-native-arrival';
class ScreenA extends Component {
 render() {
 return (
 <View style={{ flex: 1 }}>
 <Text>Screen A</Text>
 </View>
 );
 }
}
export default Arrival(ScreenA, {
 translateX: { from: 500, to: 0 },
 translateY: { from: 100, to: 0 },
 opacity: { from: 0, to: 1 }
});

More

p or perspective: number
r or rotate: string
rx or rotateX: string
ry or rotateY: string
rz or rotateZ: string
s or scale: number
sx or scaleX: number
sy or scaleY: number
x or translateX: number
y or translateY: number
skewX: string
skewY: string
opacity: number

Options

const ScreenA_ = Arrival(
 ScreenA,
 {
 translateX: { from: 500, to: 0 },
 translateY: { from: 100, to: 0 }
 },
 {
 toValue: 1,
 delay: 0,
 useNativeDriver: true
 }
);

Advance Options

import React, { PureComponent } from 'react';
const ScreenA_ = Arrival(
 ScreenA,
 {
 scale: { from: 0, to: 1 }
 },
 {
 extends: PureComponent
 }
);

import { Easing } from 'react-native';
const ScreenA_ = Arrival(
 ScreenA,
 {
 scale: { from: 0, to: 1 }
 },
 {
 method: 'timing',
 timing: {
 easing: Easing.linear,
 duration: 5000 // 5sec
 }
 }
);

import { Easing } from 'react-native';
const ScreenA_ = Arrival(
 ScreenA,
 {
 scale: { from: 0, to: 1 }
 },
 {
 spring: {
 friction: 7,
 tension: 40,
 speed: 12,
 bounciness: 8
 }
 }
);