react-native-css-transition v0.2.0
react-native-css-transition
Enable animate react-native components like css transition property.
Install
npm install react-native-css-transition
import Transition from 'react-native-css-transition';
Dependencies
react-native-styling: For compling nested raw style sheet.
Basic usage
Preparing style sheet
It's not a must to use react-native-styling for compling sheet, but we recommended for improving performance.
export const styles = {
Counter:{
stateTest: {
default: {
transition:[{ //Must not pass to native StyleSheet.create directly, will cause error
property:"color",
duration:1000,
delay:0,
timingFunction:Easing.back, // native Easing options
interpolate:{ // Default interpolate option for non-numeric value, auto generated
inputRange: [0, 100],
outputRange: ["#333", "#333"] // Default is initial value
},
sequence:0, //determinate the property animation effect run sync/async with others, default all zero
},{
property:"fontSize",
duration:1000,
delay:0,
timingFunction:Easing.back,
sequence:1,
}],
color: '#333'
},
1:{
color: 'yellow'
},
2:{
color: 'orange'
},
3:{
color: 'red'
}
}
}
};
export const compliedStyle = CreateNestedStyleSheet(styles);
Component
Supports the same basic components as react native Animated: Text, View, ScrollView, Image
<Transition.Text
style={GetStyle(compliedStyle.Counter.stateTest,{fontSize:10+stateValue*5},stateValue)} //will change as stateValue changed
animationOptions={{_all:{useNativeDriver:true}}}
>{v}</Transition.Text>
Props
style
Can be a normal style ID(s) or raw style properties, or stated sheet by CreateNestedStyleSheet with transition property. The transition component will monitor the delegated properties accroding to transition property setting and animated them on changed. Just like how CSS transition property works.
animationPlayed
Callback on animation played, work as Animation.start(animationPlayed).
animationOptions
Animation option object. First level key match with animated property name, _all to match all. These options will overwrite computed property value.