Animation when Component is mount
react-native-arrival
Left without react-native-arrival and right with react-native-arrival
Install
npm i react-native-arrival
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
You can use all tranform property:
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
You can change Arrival 'extends' from Component to PureComponent or other React Class
import React, { PureComponent } from 'react';
const ScreenA_ = Arrival(
ScreenA,
{
scale: { from: 0, to: 1 }
},
{
extends: PureComponent
}
);You can change Animated method from spring to timing and add method config
https://facebook.github.io/react-native/docs/animated#timing
import { Easing } from 'react-native';
const ScreenA_ = Arrival(
ScreenA,
{
scale: { from: 0, to: 1 }
},
{
method: 'timing',
timing: {
easing: Easing.linear,
duration: 5000 // 5sec
}
}
);Or change spring config
https://facebook.github.io/react-native/docs/animated#spring
import { Easing } from 'react-native';
const ScreenA_ = Arrival(
ScreenA,
{
scale: { from: 0, to: 1 }
},
{
spring: {
friction: 7,
tension: 40,
speed: 12,
bounciness: 8
}
}
);