React Native での Android アプリ開発 2019 振り返りメモ

OKUSAWA Takashi

6 min readDec 7, 2019

この記事はReact Native Advent Calendar 2019 の 7 日目の記事です。

はじめに

PIAZZA 株式会社でエンジニアをしている奥澤です。 2016 年 10 月に React Native で開発したAndroid 版 PIAZZA(ピアッツァ) をリリースしました。

一昨年、昨年、に続いて 1 年の開発の振り返りをしたいと思います。

一見、自分には関係ない…みたいな所も、何かトラブルがあったときの手がかりになりうる事が結構あると思うので、何かのお役に立てれば幸いです。

リリース回数

2018/12〜2019/11 の 1 年間で、24 回でした。昨年は 18 回だったので結構増えました。 0.59.9 へのアップデートを他のメンバーが手伝ってくれたのが大きかったです。

targetSdkVersion 26 での push 通知対応

使用ライブラリは react-native-fcm 当時最新版を入れようとして、ビルドエラーが発生したが、こちらで解決。サーバー側で channel を送信するように追加。

スプラッシュ表示ライブラリの変更

スプラッシュ画像の 9patch 化の際に、当時使用していたrn-splash-screenでは上手くいかなかったので、react-native-splash-screenへ乗り換え。

Chrome Custom Tabs 導入

WebView が RN 本体から切り離されるのを機に。react-native-custom-tabsを導入。

redux-persist 導入

immutable.js を使ってたため、手間取りました。https://twitter.com/tak603/status/1090631425353633792

react-native-calendars 導入

イベントカレンダー機能の追加時に、react-native-calendarsを試したが、機能がイマイチ足りなかったのでforkして使ってます。

土日や祝日の色を変更可
CalendarList に onScrollBeginDrag/onScrollEndDrag/onMomentumScrollBegin/onMomentumScrollEnd をセットできるように

祝日の判定は、こちらのコードを使わせてもらってます。

0.59.9 へのアップデートと、64bit apk 対応

Reactotron の update 時にハマり。 createStore に Reactotron.createEnhancer()を追加で解決。

Share.share()

Share · React Native

Reference

facebook.github.io

投稿やアプリのシェアを独自実していたものを、標準のものに置き換え。こんな便利なのがあるの知らなかった…

targetSdkVersion 28 対応

※いずれも 2019/10 月時点での対応です。

使用してる native module に warning が出るので以下の対応。

AndroidManifest.xml に android:usesCleartextTraffic=”true”
react-native-fbsdk 最新版を試すもエラー。こちらで解決。
react-native-custom-tabs はこちらの fork 版を。
react-native-photo-view はこちらの fork 版を。
react-native-shared-preferences は latest で問題なし。
react-native-splash-screen v3.2.0 で問題なし。

Android X 対応でビルドが通らなくなる

https://twitter.com/tak603/status/1140895933892136960

年に何度か発生する、突然ビルドが通らなくなる問題。このとき、真剣に Expo への移行を検討しました。

lineHeight の設定

テキストを複数行表示する場合、lineHeight を設定していないと、最終行が少し欠けて表示される事が多くなった。以前は無かったような気がするが…

rn-fetch-blob

画像保存後に、ギャラリーへ飛ばせるようにしてる部分が warning がでて動かなくなっていた。

原因はこちら。 RN 0.60.0 未満は v0.10.15 を使う必要があり、そちらには上記修正は適応されていない。とりあえず patch 作って対処。

FlatList を一部画面に導入

2016 年 7 月に開発をはじめたときは、ScrollView/ListView の使い勝手がイマイチだったので、ScrollView をベースにした自作 ScrollView クラスをほとんどの画面で使いまわしていたが、新しく作る画面で FlatList を試したところ、とても使い勝手が良かったので、感動した。もっと早く使いはじめていれば…

Google Play の審査

審査に時間がかかるようになってから初のアップデートでは、公開まで 3 時間ほどかかったが、その後は大体 30 分以内に公開されるようになった。

まとめ

2019 年も RN 本体やライブラリのアップデートで時間を取られることが多かったです。特に、こちらのビルドエラー発生時は、当時 Expo への移行を検討してる時期だったので、Expo へ完全移行するしかないと思いました。ですが、RN 自体の最近のアップデート状況を見ると react-native-unimodules を入れれば十分かな？と思います。

React を触りはじめて 4 年以上、ReactNative を触りはじめて 3 年半以上経ちますが、どちらも進化が止まらないので、楽しく開発できてます。2020 年は react-native-unimodules を導入したり、既存画面を Hooks で置き換えつつリファクタしたり、やりたいことはたくさんあります！

最後に、PIAZZA 株式会社はエンジニアを絶賛募集中です！

シリーズ A 資金調達が終わり会社もサービスもどんどんスケールさせていくので、興味がある方はお気軽にメッセージ下さい！！

React Native Advent Calendar 2019 8 日目は @pside さんです！

React Native での Android アプリ 開発 2019 振り返りメモ