【RN Update 2024年6月】Vision Camera が Orientation をサポート 他
はじめに
こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です。
この記事では、今月の React Native に関連するニュースを紹介します。
目次
- ライブラリ情報
- 【React Native Vision Camera】 Orientation をサポート
- 【React Native Is Maestro】 v3 がリリース
- 【React Navigation】 v7 が RC に到達
- 【React Native Reanimated】 useComposedEventHandler hooks を追加
- React Native 関連情報
- 次世代 React Native からの New Architecture デフォルト化を延期？
ライブラリ情報
【React Native Vision Camera】 Orientation をサポート
React Native Vision Camera が画面の回転検知（Orientation）を v4.1.0 からサポートしました！
以前から Orientation 機能に対してスポンサーを募集しており、その結果次第で開発すると予告されていました。
スポンサーが全て集まってないのに、何があったんだろう？
これで長年の辛みであった画面横向け対応が可能になるということですね！
使い方は簡単で
<Camera {...props} outputOrientation='device' />
とoutputOrientationを指定するだけです。
指定できるタイプはpreviewやdevice、portraitなどありますので公式ドキュメントにてお確かめください。
また、この影響か分かりませんが、最新の v4.3.2 は React Native v0.73 以上で次のバージョンからは最新の v0.74 以上のみを対象とするそうです。
Expo 同様に最新のみ対応ということで、アップデートがより身が引き締まりますね。
【React Native Is Maestro】 v3 がリリース
最新の React Native v0.74 以上に対応した React Native Is Maestro の v3 がリリースされました！
そもそも、Maestro って？って方は手前味噌ですがこちらをご覧ください。
そして、React Native Is Maestro ってなんぞや？って方のために少し解説しますと、
import React from 'react';
import { View, Text } from 'react-native';
import { isMaestro } from 'react-native-is-maestro';
export const App = () => (
<View>
<Text>isMaestro detected: {isMaestro() ? 'yes' : 'no'}</Text>
</View>
);
みたいな感じで Maestro の E2E テストの時だけ True になる関数を生やすことができるんですね。
【React Navigation】 v7 が RC に到達
昨年 2 月から alpha 版として開発が進められてきた React Navigation v7 が、いよいよ RC に到達しました！
v7 では static API なるものがサポートされるようで詳細は手前味噌ですがこちらをご覧ください。
すでに、公式ドキュメントにも v7 が登場しており、マイグレーションガイドもあるみたいです。
パブリックリリースまでに必要な変更点を洗い出しておきたいですね。
【React Native Reanimated】 useComposedEventHandler hooks を追加
Reanimated に useComposedEventHandler という hooks が追加されました！
使い方を見てみましょう。
import Animated, {
useAnimatedScrollHandler,
useComposedEventHandler,
} from 'react-native-reanimated';
function ComposedEventHandlerExample() {
const onScrollHandler1 = useAnimatedScrollHandler({
onScroll(e) {
console.log('Scroll handler 1 onScroll event');
},
});
const onScrollHandler2 = useAnimatedScrollHandler({
onScroll(e) {
console.log('Scroll handler 2 onScroll event');
},
});
const composedHandler = useComposedEventHandler([
onScrollHandler1,
onScrollHandler2,
]);
return (
<View style={styles.container}>
<Animated.ScrollView style={styles.scroll} onScroll={composedHandler}>
<Content />
</Animated.ScrollView>
</View>
);
}
Animated.ScrollViewの onScroll イベントを onScrollHandler1 と onScrollHandler2 の両方に渡したい時に統合するためのuseComposedEventHandlerを利用する、こんな使い方ができるみたいです。
React Native 関連情報
次世代 React Native からの New Architecture デフォルト化を延期？
次世代の React Native バージョンから New Architecture デフォルト化されるとアナウンスされていましたが、そのプルリクエストが Revert されています。
これは一旦延期するという動きに映りますが、真相はいかに。
最後に
ここまで読んでいただきありがとうございました。
もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！
Discussion