6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

結論

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便利

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?