UI Animations in React Native
UI Animations are important
LayoutAnimation
- Simple animations that run when next layout happens.
- Easy to setup.
- No real control.
Animated
- Complicated animations.
- Relatively complicated Setup.
- Fine grained control.
- Very useful for handling gesture animations. (along with PanResponder API)
was finally able to break into the app's proprietary codebase last night and boy! that getTotalMatchCount() subroutine was super tight! amazing app!
- James Young, 5 stars
Animated
Animated.Value()
&
Animated.ValueXY()
Animated.Value()
opacity, scale, rotate, translate, skew ...
Example 1
- Rotating the main button.
- Reversing the rotate animation.
- Animating the child buttons
// MainButton.js
import { Animated } from 'react-native'
export default (MainButton = ({ onPress, styles, icon }) => (
<TouchableWithoutFeedback
onPress={onPress}
>
<Animated.View style={styles}>
<Icon
...
/>
</Animated.View>
</TouchableWithoutFeedback>
));
// AddButton.js
export default class AddButton extends Component {
render() {
<View style={styles.container}>
<MainButton
onPress={this.onMainButtonPress}
styles={...}
icon="md-dd"
/>
</View>
}
}
// AddButton.js
const styles = StyleSheet.create({
mainButton: {
width: 70,
height: 70,
....
}
});
export default class AddButton extends Component {
dynamicMainButtonStyles = () => ({
// Return dynamic styles
});
onMainButtonPress = () => {
// Trigger the animation
};
render() {
<View style={styles.container}>
<MainButton
onPress={this.onMainButtonPress}
styles={this.dynamicMainButtonStyles()}
icon="md-dd"
/>
</View>
}
}
{
dynamicMainButtonStyles = () => ({
...StyleSheet.flatten(styles.mainButton),
});
onMainButtonPress = () => {
// Trigger the animation
}
}
// TODO : More code walk through for this example to demonstrate Animated.Value(), Animated.timing/spring e.t.c, custom technique to reverse animation and Animated.stagger()
Example 2
Animating contents of newly summoned screen.
// TODO: Code walkthrough for Example 2 to explain Animated.stagger and also for creating custom views for animated child components
Animated.ValueXY()
2D animations, Animations that respond to gesture events emitted by PanResponder API
Example 3
Animate cards based on gestures.
(The final example will have card fully swipeable and dismissable from the list)
// TODO: Code walkthrough briefly explaning PanResponder API and how it can be used to create gesture based animations along with Animated.ValueXY()
Thank You
@NashVail
UI Animation in React Native
By Nash Vail
UI Animation in React Native
- 1,456