react-native-animatable

개요

기본적으로 많이 사용되는 애니메이션을 모아둔 react-native-animatable 라이브러리를 사용하여 애니메이션을 구현하는 방법에 대해서 설명합니다.

이 블로그에서는 RN(react native)에 typescript와 styled-components가 적용된 프로젝트를 가지고 설명합니다. RN(react native)에 typescript와 styled-components를 적용하는 방법에 대해서는 이전 블로그를 확인해 주세요.

라이브러리 설치

react-native-animatable 라이브러리를 사용하기 위해 아래에 명령어로 라이브러리를 설치합니다.

npm install react-native-animatable --save

기본 사용법

아래와 같이 애니메이션을 추가하고 싶은 부분에 소스를 추가합니다.

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>
    );
  }
  ...
}

이벤트를 통한 사용법

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

styled-components로 만든 컴포넌트(component)에 애니메이션을 적용하는 방법입니다.

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}
      />
    );
  }
  ...
}