Help us understand the problem. What is going on with this article?

Lottie+React NativeでFunctional Componentを使いたいんだけど?

結論

useRefを使いましょう

やりたかったこと

React Nativeでいいねボタンを押した時に、以下のようなオシャレなアニメーションをつけたくなりました。

animation_500_ki2f47b9.gif

Lottieを使うことにする

自作は辛いので調べているとこちらの記事の内容がドンピシャだったので、Lottieを使うことに決めました。

lottie-react-nativeの実装例を探す

React Nativeでlottieを使うにはlottie-react-nativeが便利です。

以下のリポジトリや記事を参照しながら実装例を探していきました。

あれ?どれもClass Componentばかりだぞ...?

ここまで調べてきたところ、
Class Componentのインスタンスにanimationの参照をもたせている実装例ばかりです。

意地でもFunctional Componentで書きたい

既存のコンポーネントをガッツリFunctional Componentで書いてしまっていたので、
ここからClass Componentに書き換えるのは面倒です。何とか実現できる方法を探しました。

Stackoverflowで良い質問を見つける

[useRef hooks doesn't work with lottie-react-native(https://stackoverflow.com/questions/58283848/useref-hooks-doesnt-work-with-lottie-react-native)

どうやらReact Hooksの機能の一つであるuseRefを使えばDOMの参照を取得できるので、
クラスを書かずに済みそうです。

Reactの公式ドキュメントでも紹介されていますね。
https://ja.reactjs.org/docs/hooks-reference.html#useref

useRefで実装した例

Expoの公式ドキュメントの内容をuseRefに書き換えたものをSnackに書きました。
コードはこちらをご覧ください。

lottie-react-native-useref-example

動作イメージはこんな感じです。

be059d357699d96915c584630c368d7e.gif

まとめ

ということでFunctional Componentで書いてしまっていたコンポーネントに、
Lottieを使ってアニメーションをつけたくなったらuseRefを使いましょう。

React Hooks便利

masarufuruya
Webメインのフリーランスエンジニア。React Nativeでアプリ作ってます。React/React Native/Vue/Ruby/PHP
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。
https://community.camp-fire.jp/projects/view/280040
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away