react-native-animatable

概要

基本的に結構使ってるアニメーションを纏めたreact-native-animatableライブラリを使ってアニメーションを利用する方法について説明します。

このブログではリアクトネイティブ(React Native)にtypescriptとstyled-componentsが適用されたプロジェクトで説明します。リアクトネイティブ(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>
    );
  }
  ...
}

イベントを通じて使い方

リアクトネイティブ(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}
      />
    );
  }
  ...
}