【RN Update 2023年10月】React Native Track Player v4がリリース 他
はじめに
こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です。
この記事では、今月の React Native に関連するニュースを紹介します。
目次
- ライブラリ情報
- 【React Native Track Player】 v4 がリリース
- 【React Native Screens】 useReanimatedHeaderHeight hooks が追加
- React Native 関連情報
- React Native Meetup #14 開催
ライブラリ情報
【React Native Track Player】 v4 がリリース
Track Player の v4 がリリースされました！
マイグレーションガイドはこちらです。
詳細なリリースノートが見つからなかったので、実装差分から主なアップデートを紹介します。
キュー処理の改善
SwiftAudio と KotlinAudio の Native 実装が新たなものに変更されています
その影響からTrackPlayer.getCurrentTrack()からTrackPlayer.getActiveTrackIndex()への名称変更などの大幅な変更があります。
非推奨になる関数も多数存在するので注意が必要です。マイグレーションガイドに詳しく記載されていますので、使用される方はご一読されることをお勧めします。
useIsPlaying など便利な hooks の追加
今まで自作しなければならなかったような便利な hooks が追加されています。
例えば、以下のようなコードでデータ読み込み中のスピナー表示が可能になります。
const { playing, bufferingDuringPlay } = useIsPlaying();
return bufferingDuringPlay ? (
<View style={styles.statusContainer}>
<ActivityIndicator />
</View>
) : (
<Button
title={playing ? 'Pause' : 'Play'}
onPress={playing ? TrackPlayer.pause : TrackPlayer.play}
type="primary"
style={styles.playPause}
/>
hooks の中を見るとそこまで難しい実装ではないのですが、こういう使い手に配慮した実装は非常にありがたいです。
さまざまな Android 系バグの修正
v3.2.0 において、Android の大幅なアップデートがありました。その影響から、Android にはいくつかのバグが残されており、その報告 Issue が存在していました。
今回の v4 ではそれらの対応も丁寧に実施しされています。
なお 10 月 31 日現在、Android の Release build にてローカルファイルが再生できないバグが存在しています。本番環境の製品にご活用の際はご注意ください。
【React Native Screens】 useReanimatedHeaderHeight hooks が追加
React Native Screens から useReanimatedHeaderHeight と言う hooks が追加されました！
まずは、公式 Example を動かしてみた様子をご覧ください。
| 従来（固定値） | useAnimatedHeaderHeight |
|---|---|
 |
 |
これは、React Native Screens にラップされた React Navigation を利用する際に、headerLargeTitleを true にした場合のヘッダー高さを動的に取得できるようするための hooks です。
公式 Exampleの一部を下記に抜粋して、使い方を見てみましょう。
import { createNativeStackNavigator } from 'react-native-screens/native-stack';
import { Animated } from 'react-native';
import { useAnimatedHeaderHeight } from 'react-native-screens/native-stack';
const Stack = createNativeStackNavigator();
function ExampleScreen() {
const headerHeight = useAnimatedHeaderHeight();
return (
<FullWindowOverlay>
<Animated.View
style={{
...
transform: [
{
translateY: headerHeight,
},
],
}}>
</Animated.View>
</FullWindowOverlay>
);
}
...
const headerHeight = useAnimatedHeaderHeight();で headerHeight を取得して、Animated.Viewに渡すと動的に変更可能になります。さすが、Reanimated と似たような動きをしますね。
そもそも React Native Screens にラップされた React Navigation の存在を知らなかったので、このような挙動が可能なのに驚きました。
依存関係が複雑になるので利用には慎重を要しますが、欲しい機能をお手軽に実装できるのはいいですね。
React Native 関連情報
React Native Meetup #14 開催
React Native Japan 主催のイベントが約 1 年ぶりに開催されました。
リアルイベントはいいですね！
普段 React Native ユーザーと集まれる機会がなかなかないので、色々な方と情報交換できてよかったです。
会場を準備してくださったスタッフの皆様には感謝しかありません、本当にありがとうございました。
ちなみに私も LT で発表していますので、もしよろしければ資料ご覧ください！
最後に
ここまで読んでいただきありがとうございました。
もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！
Discussion