🔖

【RN Update 2023年2月】Expo48がリリース 他

2023/02/27に公開

はじめに

こんにちは!
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です!

https://www.oto-trip.com/

この記事では、今月のReact Nativeに関連するニュースを紹介します。

目次

  • ライブラリ情報
    • 【Expo】 v48がリリース
    • 【React Navigation】 7 alphaが公開
  • React Native関連情報
    • State of React Native
    • shopifyのReact Native移行に関して

ライブラリアップデート情報

Expo48がリリース

Expoの48がリリースされました!

https://blog.expo.dev/expo-sdk-48-ccb8302e231

主な変更点としては、以下の通りです。

  • HermesがデフォルトのJavaScriptエンジンに変更
  • React Native 0.71.3とReact 18.2.0に対応
  • Android API levelが33に変更
  • 試験的なNew Architectureのサポート開始

また、Expo Imageが発表されています。

https://docs.expo.dev/versions/v48.0.0/sdk/image/

Expo Imageは、メモリキャッシュやblurhashなど画像ライブラリとして必要な機能が一通り揃っているようです。
React Nativeの画像キャッシュといえばFastImageが有名ですが、こちらはNew Architecture対応が未着手であることを踏まえると、Expo Image移行も検討すべきかもしれません。

ちなみにNew Architectureとはなんぞや?という方は、以下の記事が非常に参考になります。

https://qiita.com/Naturalclar/items/30a07ff86acc7a1ea03c


React Navigation 7 alphaが公開

v7からstatic APIなるものがサポートされるようです。

https://reactnavigation.org/docs/7.x/static-configuration/

どんな機能か見ていきましょう。
今まで通りの書き方(v6)と新たな書き方(v7)を併記します。

// v6
const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

// v7
const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
  },
});

どうやら、冗長的な書き方をやめる方法みたいです。
v6の方を使うと動的なページ遷移が可能なる一方で、型定義などがいちいちめんどくさいです。
その代替案として、v7では静的なページ遷移を用意したようです。
公式でも述べられていますが、動的な遷移が不要になるわけではなく、あくまで静的な遷移を楽にするための新たな機能のようですね。

React Native関連情報

State of React Native

State of JSのReact Native版が公開されました。

https://results.stateofreactnative.com/

  • どんな人たちがReact Nativeを使用してるのか?
  • みんなはどんな技術を使用してるのか?

などなど、React Nativeの世界的な潮流がわかるコラムです。
React Native の代替案として100%の人がFlutterを意識しているのには、思わず「わかる。。。」と声が出てしましました。
機会があれば日本版も作ってみたいですね。


shopifyのReact Native移行に関して

昨年末に以下のようなコラムがshopifyより公開されています。

https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native

本コラムでは、React Native移行のための道のりと移行によるメリット、現在の状況などが述べられています。
React Nativeはオワコンという声が聞こえてきそうな昨今、shopifyのような巨大企業の登場はReact Nativeの未来を感じさせるものです。

本コラム中でも触れられていますが、shopifyは多くのオープンソースライブラリへの投資を行っているようです。
オトとりっぷでは、FlashListReact Native Skiaなどをまだ採用できていませんが、どんどん最新技術をキャッチアップしていきたいです!

https://shopify.github.io/flash-list/

https://shopify.github.io/react-native-skia/

最後に

ここまで読んでいただきありがとうございました。

もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください!

https://www.oto-trip.com/

Discussion