React nativeとExpoの構成でLottieアニメーションの組み込み法を解説

Lottieとは

Lottieは、Adobe After Effectsで作成されたアニメーションをiOS、Android、web、React Native、Reactなどのアプリで再生できるようにするライブラリです。Bodymovinと呼ばれるAfter Effectsのプラグインを用いてアニメーションをJSON形式でエクスポートし、そのJSONファイルをLottieが読み込むことでアプリ内にて再生できます。

LottieはAirbnbが開発し、コミュニティに公開しています。スケーラブルで動的なアニメーションを簡単に実装できるため、UI/UXの向上に役立つツールとして多くの開発者に利用されています。

アニメーションを探す

まず初めに自分が使用したいlottieアニメーションをLottiefileで探します　無料　有償どちらのアニメーションもあります。

ライブラリをインストールする

Expo React native Lottie用の公式ページ　利用方法などはここを参照

Expo用のLottie Reactライブラリをインストール

npx expo install lottie-react-native

Lottie React Native　ライブラリリポジトリ　READMEを参照

ディレクトリ構成

/ ━ app ━ index.jsx
  ┣ assets ━ bay.json(好きなアニメーションに適宜入れ替え)

コード

import React from "react";
import LottieView from "lottie-react-native";

export default function Animation() {
    return (
        <LottieView
            source={require("../assets/bay.json")}
            style={{width: "100%", height: "100%"}}
            autoPlay
            loop
        />
    );
}

Lottie公式ドキュメント