Airbnb が React Native からネイティブアプリへ方針転換することを発表してから1年が経ちました。lottie-react-native の開発は Airbnb 社からコミュニティ中心に移り、継続されています。この記事では lottie-react-native 開発コミュニティの変遷と現状、そしてこれからの動きを紹介します。
はじめに
キッチハイクエンジニアのタクです。lottie-react-native という Airbnb 製のアニメーション表示ライブラリを導入する過程で、issue や Pull Request を通してコミュニティの動きを知る機会がありました。それがきっかけで、ライブラリの内部実装や仕組み以外も理解することが、多角的な視点で実装することに繋がるのではないかと思うようになりました。
Airbnb による Lottie のリリース、React Native Community への移行、そしてこれからの動きをまとめてみました。
Airbnb製ライブラリ Lottie の誕生と lottie-react-native の構成
Lottie は Airbnb が開発するアニメーション表示ライブラリです。Adobe After Effects で作成したアニメーションを Bodymovin エクステンションでJSONデータに書き出し、Webサイトやアプリから読み込むことで表示することができます。
iOS・Android・React Native用のライブラリがそれぞれ開発されており、2017年2月にlottie-ios、lottie-android、lottie-react-native の v1.0.0 が Airbnb によってリリースされました。
lottie-react-native は Lottie を React Native で使うためのコンポーネントライブラリです。ネイティブモジュールである lottie-ios と lottie-android を Bridge する形で開発されているため、Swift で書かれた lottie-ios の機能と Java / Kotlin で書かれた lottie-android の機能を React Native でも使用することができます。
lottie-react-native では <LottieView> コンポーネントを使用してアニメーションを表示しますが、これは lottie-ios の LottieView クラスの機能と lottie-android の LottieAnimationView クラスの機能をそれぞれ Bridge しているので、 React Native のコードでアニメーションを表示することができています。
さらに言うと lottie-ios の AnimationView クラスは UIKit の UIView クラスを継承しており、 lottie-android の LottieAnimationView クラスは Android Support Library の AppCompatImageView クラスを継承しています。
lottie-react-native の開発コミュニティが Airbnb から RNC へ
lottie-ios、lottie-android、lottie-react-native の v1.0.0 がリリースされてから 約1年間は、いずれのライブラリも Airbnb によって開発されていましたが、2018年6月に lottie-react-native と lottie-android のメンテナンスを行なっていた Airbnb の Gabriel Peal 氏がある記事を投稿しました。
この記事では Airbnb が React Native での開発を見直し、ネイティブでの開発に戻すということが書かれています。
As a result, moving forward, we are sunsetting React Native at Airbnb and reinvesting all of our efforts back into native.
さらにそれまで Airbnb で開発していた React Native 用ライブラリのリポジトリも、メンテナンスできなくなったと書かれています。
As we have moved away from React Native, we haven’t been able to maintain our React Native repos as well as the community deserves.
lottie-react-native もそのひとつで、2018年4月の v2.5.0 のリリースを境に GitHub リポジトリを管理する Organization が Aribnb から React Native Community に変わりました。
React Native Community は React Native を開発する Facebook のチームと協力して、 React Native ライブラリのメンテナンスを行うコミュニティです。
React-Native-Community (RNC) is a GitHub organization dedicated to the collaborative and community-driven long-term maintenance of React Native packages & libraries - this is also made possible by collaboration with the Facebook team in charge for the development of the framework.
lottie-react-nativeとネイティブモジュールの差分が広がる
lottie-react-native は React Native Comunity が中心となって開発するようになりましたが、lottie-ios と lottie-android は現在も Airbnb が中心となって開発しています。
開発の中心となっているチームが異なり、開発コミュニティの活発さにも違いがあることから、 lottie-react-native の内部で使用しているネイティブモジュールのバージョンと、ネイティブモジュール個々の最新バージョンには差分があります。
lottie-react-native の最新バージョンは2019年6月現在で v2.6.1 ですが、内部で使用されている lottie-ios と lottie-android のバージョンはそれぞれ v2.5.0 と v2.5.6 になります。lottie-ios と lottie-android の最新バージョンは現時点で v3.1.0 と v3.0.7 なので、開発が追いついていないことがわかります。
| lottie-ios | lottie-android | |
|---|---|---|
| lottie-react-native v2.6.1 バンドル | v2.5.0 | v.2.5.6 |
| lottie-react-native v3.0.1 バンドル | v3.0.3 | v.2.5.6 |
| 各モジュールの最新バージョン | v.3.1.0 | v3.0.7 |
lottie-react-native とネイティブモジュールの間に存在する差分のひとつに、 AndroidX 対応があります。
lottie-android では 2018年9月に AndroidX に対応したバージョン v2.8.0 がリリースされました。一方で lottie-react-native は内部で利用している lottie-android のバージョンが v2.5.6 なので AndroidX 対応がまだできていません。
もちろん lottie-react-native にも AndroidX 対応に向けた動きはあります。内部で使用している lottie-android のバージョンを v3.x にアップデートすることで対応しようとしています。
upgrade to lottie-android 3.0.0 by emilioicai · Pull Request #485
しかし、 GitHub リポジトリの管理者は lottie-react-native で AndroidX をサポートすることに関して、現段階では消極的であるという発言もしています。
as @rozPierog mentioned, migrating to androidX could cause issues with a lot of other libraries. I'm reluctant to go ahead with this PR at this moment
引用元: https://github.com/react-native-community/lottie-react-native/pull/485#issuecomment-506340713
上記の PR がマージ・リリースされないと AndroidX へ移行できないので、キッチハイクでは React Native の 0.59 系へのアップデートで以下の設定を追加しています。
android.useAndroidX=false android.enableJetifier=false
開発の中心となっているコミュニティが lottie-react-native と lottie-ios ・ lottie-android で異なり、差分があることで、このような問題に直面することもあります。
各ネイティブモジュールと差分があるときに気をつけたいこと
lottie-react-native がネイティブモジュールを Bridge しているという構造と、ネイティブモジュールとの間に差分があるという事実を考慮すると、lottie-react-native の開発で詰まったときは lottie-ios と lottie-android の Issue も確認することが有効です。
私もこの方法で実際にトラブルシューティングを行い、解決しました。
自作したアニメーションを端末で表示しようとしたのですが、 iOS だと表示されるのに Android だとクラッシュしてしまうという問題に直面しました。 lottie-react-native の Issue を見ても解決方法は見つかりませんでしたが、 lottie-android の方に Issue があがっていました。
Lottie 3.0 and Bodymovin 5.5 has some significant json optimizations that will save upwards of 1/3 on the json size and parse speed. However, you must be on 3.0 or enable "export as old format" in bodymovin settings.
引用元: https://github.com/airbnb/lottie-android/issues/1177#issuecomment-481635211
私が開発を行なっていた時は v5.5.2 の Bodymovin で JSON データを書き出していたので、Android でアニメーションを表示するときにクラッシュしていました。
この Issue に書かれている通り 「 export as old format 」という設定を ON にして JSON データを書き出したところ、 Android でもアニメーションが正常に表示されました。
lottie-react-native の変遷を把握し、 lottie-ios ・ lottie-android との関係や差分があるという事実を知らなければ、この方法でのトラブルシューティングを思いつくのには時間がかかってしまっただろうと思います。
これからの Lottie と lottie-react-native の動き
lottie-react-native のこれからの動きとして、 React Native 0.60 対応も挙げられます。 lottie-react-native の Issue にもあがっています。
- Lottie not working on Android - react-native 0.60.0-rc.0 · Issue #495
- Latest versions are not published to npm · Issue #511
しかし、いずれも AndroidX 対応がネックとなっているようです。 lottie-react-native で使用している lottie-android のバージョンが v3.x にアップデートされないと難しいかもしれません。
lottie-android v3.x へのアップデートに向けた動きがある一方で、 lottie-ios v3.x へのアップデートに向けた動きもあります。こちらはすでに master にマージされています。
Upgrade to lottie-ios 3.0.x by prateekkohli1989 · Pull Request #486
lottie-ios v3.0.0 では内部実装が Objective-C から Swift に完全にリファクタリングされていますが、このことについて、 Airbnb の Tyler Hedrick 氏がブログで紹介していました。
Swift に完全にリファクタリングした理由のひとつとして、Objective-C よりも開発者の多い言語で実装することで、より多くの人がライブラリの開発に参加できるようにするためだと書かれています。
In order to allow more people to contribute directly to the library to solve these kinds of problems, we realized our best option was to move Lottie into the future and rewrite it in Swift.
lottie-ios v3.0.0 がリリースされたのは2019年3月で、 OSS 活動がより活発になることが予想できますね。
まとめ
ライブラリを導入するときに詰まったとしても、内部実装や仕組みさえ理解しておけば解決することがほとんどだと思います。ただ、開発コミュニティやこれまでの変遷を把握することで考えられることが増える、視点が増えるというのも事実です。
コードや仕組みだけでなく、開発コミュニティや変遷など違った角度から理解を深めれば、より柔軟な考え方で開発に取り組めるのではないでしょうか。
We’re Hiring!
キッチハイクでは、React Nativeエンジニア・Railsエンジニア・フロントエンドエンジニアを募集中です！
