Expo Go + Lottieデバイスで Lottie File が表示されない問題に対応した

シミュレーターでは表示されますが、デバイスでは Lottie のアニメーションが再生されず、何も表示されない問題が発生していました。

以下の Stackoverflow の記事を元に修正したところ、デバイスでも表示できるようになったため、共有します。

https://stackoverflow.com/questions/71299495/lottieview-works-in-ios-simulator-but-doesnt-work-on-device-expo

shell

npx expo install lottie-react-native

実機端末の Expo Go 上でも上の画像と同じようにアニメーションが再生されています。

動くコードは以下のとおりです。

LottieImage.tsx

import tw from 'twrnc';
import { View, Text, TouchableOpacity } from 'react-native';
import LottieView from 'lottie-react-native';
import { useEffect, useRef } from 'react';

export default function LottieImage() {
  const animation = useRef<LottieView>(null);
  const play = () => {
    animation.current?.play();
  };

  const pause = () => {
    animation.current?.pause();
  };
  const stop = () => {
    animation.current?.reset();
  };
  useEffect(() => {}, []);
  return (
    <View style={tw`flex-1 justify-center items-center`}>
      <TouchableOpacity onPress={play}>
        <Text>Play</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={stop}>
        <Text>stop</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={pause}>
        <Text>pause</Text>
      </TouchableOpacity>
      <LottieView
        autoPlay={false}
        ref={animation}
        style={{
          width: 200,
          height: 200,
          backgroundColor: '#eee',
        }}
        source={require('./check.json')}
        loop={false}
      />
    </View>
  );
}

Expo の公式サイトでは animation.current?.play がコメントアウトされていますが、animation.current?.playを使わないとうまくアニメーションが表示できませんでした。

LottieView の autoPlay は削除しました。

また、サンプルでは ./assets/check.json のように assets を指定して Lottie File を読み込んでいるものが多いですが、コンポーネントと同じディレクトリに配置しました。

Lottie については、LottieFiles からいい感じのものを選び、 json をダウンロードしています。