v0.61 から始めるreact-nativeの注意点まとめ

react-nativeを始めるには、大きく分けて2つの道があります。
expoという、js以外の部分を全てexpo serverにまかせてしまう方法、
及び、react-native-cliを使って、jsのファイルからiOS,Androidのビルドまでを自分で行う方法、いわゆる素のreact-nativeです。

いままで、素のreact-nativeで開発するには、jsの知識の他に、iOSやAndroidのビルド知識や、ネイティブの知識が多く必要でした。

しかし、最近(2019/10/22現在)では、素のreact-native回りで苦労する人が多かった、Native Moduleを使ったライブラリとのLinkなどがだいぶ楽になってきました。
react-native v0.61では、Fast Refresh機能や、Metro bundler上でログが表示されたり、現在のExpo(v35)には無い機能があるので、個人的には素のreact nativeで開発するほうが楽なのではと考えています。

しかし、素のreact-nativeならではの注意点はまだ存在するため、個人的な忘備録として、その注意点を記載します。

気が向いたら追加していきます。

TypeScriptでreact-nativeを始める。

react-native typescriptで検索すると、結構前にMicrosoftが用意していたTemplateを使って始めるReact Native公式ブログの記事が出てきます。

2019/10/22時点でこのページに記載されているTemplateは古いです。
templateリポジトリが存在しないのか、この記事の通りコマンドを打っても失敗します。

今は、コミュニティが作成している、typescriptのtemplateリポジトリが存在するので、そちらの手順に従って、以下のコマンドでプロジェクトを作成しましょう。

npx react-native init MyApp --template react-native-template-typescript

react-native-vector-icons を使う

react-native v0.60以降は、Native ModuleをLinkするのに、react-native linkコマンドを使用する必要がなくなりました。 iOSの場合cocoapods, Androidの場合 jetifier が良い感じにNative ModuleのLinkを自動的にやってくれます。
ただ、自動的に変更してくれる箇所以外にも変更が必要な箇所があるライブラリもあります。
その一つがreact-native-vector-iconsです。
react-native-vector-iconsはNative ModuleのLinkの他に、Vector-iconのFontファイルが読み込まれるようにする必要があります。react-native-vector-iconsのREADMEにも記載されていますが、下記手順を取ればFontファイルが読み込まれます。

iOS

info.plistに、使用したいFontを記載します。提供されているアイコン全てを使う場合は、以下の内容をinfo.plistに追記してください。

<key>UIAppFonts</key>
<array>
	<string>AntDesign.ttf</string>
	<string>Entypo.ttf</string>
	<string>EvilIcons.ttf</string>
	<string>Feather.ttf</string>
	<string>FontAwesome.ttf</string>
	<string>FontAwesome5_Brands.ttf</string>
	<string>FontAwesome5_Regular.ttf</string>
	<string>FontAwesome5_Solid.ttf</string>
	<string>Foundation.ttf</string>
	<string>Ionicons.ttf</string>
	<string>MaterialIcons.ttf</string>
	<string>MaterialCommunityIcons.ttf</string>
	<string>SimpleLineIcons.ttf</string>
	<string>Octicons.ttf</string>
	<string>Zocial.ttf</string>
</array>

Android

android/build.gradle (android/app/build.gradleじゃないほう)に下記の内容を追記します。

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

追加するFontの数を絞りたい場合は、代わりに下記の内容を追記します。

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // 追加したいFontファイル
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"