ExpoでLottieを使う

🤔やってみたいこと

LottieFilesというサービスを使用してアニメーションをExpoに導入したい。以前やって失敗したが、導入の手順は公式に書いてあった😅

https://docs.expo.dev/versions/latest/sdk/lottie/
https://lottiefiles.com/jp/

• 開発環境: Mac mini
• OS: iOS & Android
• Windserf Editor

🚀やってみたこと

こちらのサイトから素材を入手しましょう。ワークスペースなら場所に保存する必要があるようだ。

https://lottiefiles.com/jp/featured-free-animations

プロジェクトを作成する。

bunx create-expo-app lottie-animation -t expo-template-blank-typescript

パッケージを追加する。

bun add lottie-react-native

ワークスペースからダウンロードしたjsonファイルを名前が長いので、cat.jsonに編集してassets/ディレクトリに配置する。

こちらがサンプルコードですね。公式コードを修正して使用。

import { useRef, useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from 'lottie-react-native';

export default function App() {
  const animation = useRef<LottieView>(null);
  useEffect(() => {
    // You can control the ref programmatically, rather than using autoPlay
    // animation.current?.play();
  }, []);

  return (
    <View style={styles.animationContainer}>
      <LottieView
        autoPlay
        ref={animation}
        style={{
          width: 200,
          height: 200,
          backgroundColor: '#eee',
        }}
        // Find more Lottie files at https://lottiefiles.com/featured
        source={require('./assets/cat.json')}
      />
      <View style={styles.buttonContainer}>
        <Button
          title="Restart Animation"
          onPress={() => {
            animation.current?.reset();
            animation.current?.play();
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  animationContainer: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  buttonContainer: {
    paddingTop: 20,
  },
});

試してみたら動いたようだ。
https://youtu.be/7GOtL507UBc

🙂最後に

ReactNativeというより今は、Expoと呼んだ方がいいのかな。別物な気がする。iOSとAndroidの設定が割と簡単にできたので両方のOSに対応したモバイルアプリを作るならこちら使ったほうがいいかもしれません？
Androidだとxmlしか対応していない？