react-native-animatable

2020-12-16 hit count image

let's see how to use react-native-animatable to add simply animations to RN(react native).

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

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts