はじめに

キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！

はじめに
React Native Japanコミュニティの近況
React Native アプリのクリーンビルドコマンド
React Native プロジェクトのクリーンアップを行うライブラリ
iOSでのHermesパフォーマンス
決済サービス Stripe の React Native SDK stripe-react-native
React Native でグラデーションを再現する
キッチハイクのアプリ開発最前線
さいごに
We're Hiring

React Native Japanコミュニティの近況

React Native Meetup #12 LT大会！が今週5/21(金)開催です。参加者100人以上！
stand.fm での放送
- 4/20 #14 BeatFit社CTO 飯塚さんと話す医療とエンジニアリング - React Native Japan | stand.fm
- 4/27 #15 BeatFit CTO飯塚氏と話す React Nativeアプリ開発 - React Native Japan | stand.fm
オンラインでのハンズオンイベント第三弾
- 6/6 新生活応援！React Nativeハンズオン入門編 #3 - connpass
ドキュメントの翻訳プロジェクトもやってます。詳細はReact Native JapanのDiscordまで。

コメント
「大盛り上がりですね！」
「BeatFit社のCTO, 飯塚さんは元内科医のエンジニアということでめずらしい経歴ですね」
「今年の10月に React Native Matsuri 2021 も開催されます」

reactnative-matsuri.com

React Native アプリのクリーンビルドコマンド

www.instamobile.io

各社で持っているがちょっとずつ違いそう -> と思ったら他メンバーの持ち込みにGitHubでプロジェクト化されているという情報がありました。

この記事で紹介されているコマンド

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm ios/Pods ios/Podfile.lock 
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache

React Native プロジェクトのクリーンアップを行うライブラリ

github.com

react-native-clean-project はReact Native プロジェクトのクリーンアップを自動化するnpm パッケージ
React Native v0.64.1 のリリースノートからリンクされている
Metro bundler cache, node_modules, pod のキャッシュ削除などを行ってくれる
react-native clean-project-auto やreact-native clean-project というコマンドを実行することで、Metro Bundler のキャッシュ削除やnode_modules の再インストールやiOS / Android のディレクトリの掃除を行ってくれる
オプションを渡すことで、実行する処理を変更することが可能
package.json に任意のスクリプトを記述して実行させることも可能

所感

RN プロジェクトのクリーンに関する情報がある程度集まるリポジトリと思われる。定期的にチェックするといいかも (必須ではない)
キッチハイクでは社内wikiにてクリーン系のコマンドも管理しており、導入して得られるメリットはあまりなさそう
多くのディレクトリを自動でクリーンしてくれるのは、RN 初学者にとっては便利
RN アップグレード作業時などでは、どのキャッシュを消すか・消さないかは細かく制御したい
- 毎回全部クリーンすると待ち時間が長くなるのでつらい
- react-native-clean-project のコマンドオプションを毎回打ち込むより、社内wikiのビルドコマンドのうち必要なものを打つ方が楽かも

コメント
「キッチハイク社だとGitHubのwikiでクリーンビルドコマンドは管理してますね」
「自社管理だとコマンドのメンテナンス工数が地味にかかるので、ライブラリ化してくれるのはめちゃ助かります」
「React Native公式で紹介されていると安心感がありますね」

iOSでのHermesパフォーマンス

Hermesパフォーマンス計測記事

callstack.com

サマリ

記事で取り上げられている3機種全てで、起動までの時間はHermesの方が速い
起動から操作できるまでにかかる時間の短縮
- アプリ起動から操作可能になるまでにかかる時間が約40%短縮されたよう
- 古い機種ほど起動時間の短縮幅が大きい
- iPhone 6 だと 2.59 秒も短縮されている
メモリ使用量の改善
- メモリ使用量も iPhoneX で 38MB も削減されていたとのこと
アプリサイズが少しだけ増えた
- 2MB 増えたようだが、そこまで気にならないサイズ

f:id:narukami894:20210519190740g:plain https://callstack.com/blog/hermes-performance-on-ios/ より転載

コメント
「確かにかなり速い！」
「iOSでもHermesが使えるようになったので入れたいですね！」
「Androidだとアプリのダウンロードサイズが減るらしいです」
「キッチハイクでもHermes試してます。6月のリリースで導入できる予定です。」

決済サービス Stripe の React Native SDK `stripe-react-native`

github.com

The official Stripe client library for React Native is now in public beta! ⚛️

🧩 Pre-built native payments UI for Android & iOS
📱 Apple Pay & Google Pay
🔒 Secure card input and local payment methods

Try it out and give feedback here: https://t.co/kpA6Y9azvt.
— Stripe Developers (@StripeDev) May 10, 2021

useStripeというhooksを提供するほか、カード入力UIも提供する
Apple Payの連携もできる
ベータ版だが Apple Pay, Google Pay用のUIも提供しているそう
サンプルアプリもあるので手元ですぐ動かせる

コメント
「Stripe使っている人たちには朗報」
「Stripe公式が開発しているので、安心感ある」
「導入したいけど、いまの実装からどのタイミングで乗り換えるか悩ましい」

React Native でグラデーションを再現する

sourajitkarada.medium.com

github.com

qiita.com

React Nativeでは純正の StyleSheet モジュールでほとんどの CSS の振る舞いをサポートしているが、グラデーションだけは再現することができない
- react-native-linear-gradient というパッケージを使用して、グラデーションを再現することが可能

コメント
「これキッチハイクでも使っていますね！」
「個人開発でも使いました〜、簡単にグラデーションをつくれてオシャレにできるのでおすすめです」

キッチハイクのアプリ開発最前線

React Native 0.64.1へアップグレード作業中
- 0.64.1 にすることで Xcode 12.5 が使えるようになる
- Xcode 12.5 を使うことで iOS 14.5 が使えるようになる
最近話題の ATT（App Tracking Transparency）対応は検討した結果、対応しないことにした

コメント
「最近の広告とプライバシー保護の流れはかなり大きいので要チェックですね」
「IDFA, IDFVなど広告周りは略語が多くて難しい...」

qiita.com