Contents
outline
to add simply animations to RN(react native), we’ll introduce how to use react-native-animatable which has gathered basic useful animations.
in this blog, we’ll explain with RN(react native) applied typescript and styled-components. if you don’t know how to apply typescript and styled-components to RN(react native), see our previous blogs.
install the library
execute below command to install react-native-animatable library.
npm install react-native-animatable --save
basic usage
add source like below to where you want to add an animation.
- Functional Component
...
import * as Animatable from 'react-native-animatable';
...
const App = () => {
...
return (
<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>
);
}
- Class Component
...
import * as Animatable from 'react-native-animatable';
...
export default class App extends React.Component<Props, State> {
...
render() {
...
return (
<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>
);
}
...
}
usage with event
we can make animations start when user event is occurred by using RN(react native) ref.
- Functional Component
...
import * as Animatable from 'react-native-animatable';
...
const Page = () => {
const AnimationRef = useRef(null);
...
const _onPress = () => {
if(AnimationRef) {
AnimationRef.current?.bounce();
}
}
...
return (
<TouchableWithoutFeedback onPress={_onPress}>
<Animatable.View ref={AnimationRef}>
<Text>Bounce me!</Text>
</Animatable.View>
</TouchableWithoutFeedback>
);
}
- Class Component
...
import * as Animatable from 'react-native-animatable';
...
export default class Page extends React.Component<Props, State> {
private AnimationRef;
...
render() {
...
return (
<TouchableWithoutFeedback onPress={this._onPress}>
<Animatable.View ref={ref => (this.AnimationRef = ref)}>
<Text>Bounce me!</Text>
</Animatable.View>
</TouchableWithoutFeedback>
);
}
...
private _onPress = () => {
this.AnimationRef.bounce();
}
...
}
styled-components
below is the way to apply an animation to the styled-components.
- Functional Component
...
import styled from 'styled-components/native';
import * as Animatable from 'react-native-animatable';
...
const StyledImage = Animatable.createAnimatableComponent(styled.Image``);
...
const App = () => {
...
return (
<StyledImage
animation="bounceIn"
delay={1000}
useNativeDriver={true}
source={src}
/>
);
}
- Class Component
...
import styled from 'styled-components/native';
import * as Animatable from 'react-native-animatable';
...
const StyledImage = Animatable.createAnimatableComponent(styled.Image``);
...
export default class App extends React.Component<Props, State> {
...
render() {
...
return (
<StyledImage
animation="bounceIn"
delay={1000}
useNativeDriver={true}
source={src}
/>
);
}
...
}
animation list
you can see animations with examples at react-native-animatable official repository.
below is animation list.
- bounce
- flash
- jello
- pulse
- rotate
- rubberBand
- shake
- swing
- tada
- wobble
- bounceIn
- bounceInDown
- bounceInUp
- bounceInLeft
- bounceInRight
- bounceOut
- bounceOutDown
- bounceOutUp
- bounceOutLeft
- bounceOutRight
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInUp
- fadeInUpBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutUp
- fadeOutUpBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- slideInDown
- slideInUp
- slideInLeft
- slideInRight
- slideOutDown
- slideOutUp
- slideOutLeft
- slideOutRight
- zoomIn
- zoomInDown
- zoomInUp
- zoomInLeft
- zoomInRight
- zoomOut
- zoomOutDown
- zoomOutUp
- zoomOutLeft
- zoomOutRight
completed
if you want to use simple animations fastly, we recommend to use react-native-animatable.
reference
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
