【RN Update 2024年5月】Expo v51がリリース 他
はじめに
こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です。
この記事では、今月の React Native に関連するニュースを紹介します。
目次
- ライブラリ情報
- 【Expo】 v51 がリリース
- 【React】 v19 がベータリリース
- 【React Native Skia】 動画をサポート
- React Native 関連情報
- App.js Conf 2024 開催
- Apple プライバシーマニフェスト対応
ライブラリ情報。
【Expo】 v51 がリリース
早くも v51 がリリースされました！
つい先日 React Native v0.74 が出たばかりなのに、追随するその速度に驚きを隠せません。ほぼ全ての Expo モジュールがブリッジレスモードへ対応しているとの事で非常に頼もしいです。
Expo モジュール系の変更として、 Expo Camera と Expo Sqlite の import 先が変更されました。
今まで next とされていたバージョンに代わり、今までのバージョンが legacy とされる点に注意が必要です。
// New APIs (SDK 50)
import { CameraView } from 'expo-camera/next';
import * as SQLite from 'expo-sqlite/next';
// New APIs (SDK 51): if you import the next packages in your app, update the
// imports to the following:
import { CameraView } from 'expo-camera';
import * as SQLite from 'expo-sqlite';
// Legacy APIs (SDK 50)
import { Camera } from 'expo-camera';
import * as SQLite from 'expo-sqlite';
// Legacy APIs (SDK 51): if you import the legacy packages in your app, update
// the imports to the following:
import { Camera } from 'expo-camera/legacy';
import * as SQLite from 'expo-sqlite/legacy';
expo-camera は Next バージョンになって内部的な実装が大幅に変更されているようなので、可能であれば現行バージョンを利用検討した方が良いかもしれませんね。
ほかには細かな変更点として、
- Expo Router v3.5 リリース
- Expo Video ライブラリのベータリリース
- Apple プライバシーマニフェスト対応
- EAS ロールアウト管理用 WebUI リリース
- Expo Go が単一のバージョンのみをサポートに
などが含まれるそうです。
Expo Go が最新バージョンのみで利用可能になるのはちょっと大胆な変更ですね。ちゃんと最新バージョンに追随していかなければと身が引き締まります。
【React】 v19 がベータリリース
React 本家の発表では、useTransition に関連する新たな hooks の登場が目玉になっているようですね。
個人的には React Compiler が気になっています。React Compiler とは useMemo などを利用せずとも再レンダリングを防止してくれるコンパイラなのですが、すでに React Native で動くそうです。
なんと React Conf 2024 で利用されたアプリが React Native 製で、そのコードが公開されています。
こんな感じで babel.config.js にプラグインとして設定すればいいんですね。気の早い人はお試ししてみてはいかがでしょうか。
【React Native Skia】 動画をサポート
Skia の対象アセットが画像だけでなく、動画もサポートしました！
公式ドキュメントにも Video が追加されています。
使い方は画像の時と同様で、アセット読み込みに useVideo を利用するみたいです。
以下に利用例を記載しておきます。
import React from 'react';
import {
Canvas,
ColorMatrix,
Fill,
ImageShader,
useVideo,
} from '@shopify/react-native-skia';
import { Pressable, useWindowDimensions } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
interface VideoExampleProps {
localVideoFile: string;
}
// The URL needs to be a local path; we usually use expo-asset for that.
export const VideoExample = ({ localVideoFile }: VideoExampleProps) => {
const paused = useSharedValue(false);
const { width, height } = useWindowDimensions();
const video = useVideo(require(localVideoFile), {
paused,
});
return (
<Pressable
style={{ flex: 1 }}
onPress={() => (paused.value = !paused.value)}
>
<Canvas style={{ flex: 1 }}>
<Fill>
<ImageShader
image={video}
x={0}
y={0}
width={width}
height={height}
fit='cover'
/>
<ColorMatrix
matrix={[
0.95, 0, 0, 0, 0.05, 0.65, 0, 0, 0, 0.15, 0.15, 0, 0, 0, 0.5, 0,
0, 0, 1, 0,
]}
/>
</Fill>
</Canvas>
</Pressable>
);
};
ImageShader に video をつっこめるのが面白いです。
Skia に動画を取り込めることで、表現の幅がグッと広がりそうですね。
React Native 関連情報
React Conf 2024 & App.js Conf 2024 開催
React の大型カンファレンスである React Conf 2024 が開催されました！
React Conf 内で React Native について言及があった内容は以下のブログに非常に分かりやすくまとまっていますので、詳細はそちらをどうぞ。
また、React Conf に続き React Native 側のカンファレンスである App.js も開催されました！
個人的に興味深かったのが、Evan Bacon 氏の Server-Driven UI Importance という概念です。
昨年から React や Next.js などは、React Server Component によるサーバ側でのコンポーネント生成を推し進めてきたと思いますが、その流れを React Native に持ち込んでモバイルアプリのコンポーネントもサーバサイドで実行する試みに大きな夢を感じます。
Apple プライバシーマニフェスト対応
Apple のプライバシーマニフェスト対応に必要な React Native 側の対応は以下の通り完了したようです。
最終的にまとまったマニフェストが吐き出され、自分でカスタマイズもできるみたいですね。
最後に
ここまで読んでいただきありがとうございました。
もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！
Discussion