React Nativeでアプリ開発をする時、ほとんどの方が「iOS向けにまずアプリを作り、その後Android対応をする」といった進め方をするのではないでしょうか。
今回は自分がiOS向けに開発した後、Android対応で何が必要だったのかをまとめます（随時追加更新）
なお、自分のメインスタックは下記の通りです。他にも色々パッケージは使っています
- expo v36.x
- react-native
- styled-components
- react-navigation
box shadowの対応
有名なやつですね。
iOSでは
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
のようにかけるシャドウですが、Androidだとこれは効きません。
代わりにelevationというAndroid独自のプロパティを使います。この場合、Androidかどうかの判定は不要です。
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
elevation: 1;
Androidのツールバーにアプリのコンテンツが隠れてしまう
画像のようなやつです。
via https://stackoverflow.com/questions/46865628/react-native-android-toolbar-going-below-status-bar
これはアプリのルートコンテナに対してpaddingを追加してあげれば良いです。
expoの場合expo-constantsからstatusBarHeightというAndroidのみで有効なAPIが用意されているのでこちらを使います。
import Constants from 'expo-constants'
paddingTop: Constants.statusBarHeight || 0
Lottie Animationの対応
自分のアプリでは、lottie-react-nativeを使っていい感じのアニメーションを入れていました。iOSでは問題なく動いたものの、androidでは同じものをそのまま使っているとアプリがクラッシュしてしまう問題がありました。
lottie-react-nativeをv3.0.4に上げると直るという話もありますが、expo installで入れると今の所~2.6.1で入ってしまうので対応できません。
2.6.1では、lottie 3のJSONフォーマットに対応していないようで、After Effect上でExport Old Json FormatでJSONをExportし直すことで直りました。
MapView内のMarkerコンポーネント
MapView内のは、ピンを立てる時によく使いますが、AndroidだとCustomコンポーネントやimageコンポーネントを使っている場合に表示されない問題があります。
対応としてはややhackyですが、Pinの高さを持った空のTextコンポーネントを入れてあげると解決します。