【RN Update 2024年7月】React Native Filament がv1をリリース 他
はじめに
こんにちは！
「愛犬との毎日を楽しく便利にするアプリ オトとりっぷ」でエンジニアしています、足立です！
この記事では、今月の React Native に関連するニュースを紹介します。
目次
- ライブラリ情報
- 【React Native Filament】 v1 がリリース
- 【React Native Flash Calendar】 v1 がリリース
- 【React Native Bootsplash】 v6 がリリース
- 【Yoga】 v3.1 を発表
- React Native 関連情報
- React Native Reanimated に Example Page を登場
ライブラリ情報
【React Native Filament】 v1 がリリース
React Native Filament の v1 がリリースされました！
（v1 自体がリリースされたのは少し前ですが、作者から発表されたのは最近でしたので今回紹介します。作者のポストはこちら）
公式ドキュメントはこちらです。
そもそも何をするためのライブラリなんでしょうか？
React Native Filament is a React Native library that makes it easy to render 3D graphics in your app, by using react components.
とのことなので、3D グラフィックを表現するためのライブラリです。
動かした結果は、公式ドキュメントのTopに表示されますので、そちらでお楽しみください。
使い方は簡単で、glbという WebGL などで利用可能な 3D モデルのフォーマットファイルをソースとして読み込むだけです。
import {
FilamentScene,
FilamentView,
DefaultLight,
Model,
Camera,
} from 'react-native-filament';
import MyModel from './MyModel.glb';
function MyScene() {
return (
<FilamentScene>
{/* 🏞️ A view to draw the 3D content to */}
<FilamentView style={{ flex: 1 }}>
{/* 💡 A light source, otherwise the scene will be black */}
<DefaultLight />
{/* 📦 A 3D model */}
<Model source={MyModel} />
{/* 📹 A camera through which the scene is observed and projected onto the view */}
<Camera />
</FilamentView>
</FilamentScene>
);
}
3D モデルを作りさえすれば React Native でも 3D モデルを簡単に動かせるようになったということで、ますます表現の幅が広がりそうですね。
【React Native Flash Calendar】 v1 がリリース
React Native Flash Calendarの v1 がリリースされました！
リリースブログがExpoブログの方に寄稿されています。
“Yes, you will really write a calendar from scratch. Buckle up!”.
ということで、満足いくものが無いから自らカレンダーライブラリをOSSとして開発されたようです。
使い方も簡単で、
import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";
import { useState } from "react";
import { Text, View } from "react-native";
const today = toDateId(new Date());
export function BasicCalendar() {
const [selectedDate, setSelectedDate] = useState(today);
return (
<View>
<Text>Selected date: {selectedDate}</Text>
<Calendar
calendarActiveDateRanges={[
{
startId: selectedDate,
endId: selectedDate,
},
]}
calendarMonthId={today}
onCalendarDayPress={setSelectedDate}
/>
</View>
);
}
と、他のカレンダーライブラリと同じような使い心地です。
カスタマイズも容易みたいなので、要件によっては検討の余地ありですね。
【React Native Bootsplash】 v6 がリリース
React Native Bootsplash が v6 をリリースされました！
新しい機能としては、以下の通りです。
- Expo plugin の追加
- useHideAnimation に ready オプションを追加
- Android に Theme.BootSplash.TransparentStatus テーマの追加
Expo の設定については、Readme.md から引用すると、
- Disable expo-splash-screen autolinking (in your package.json):
"expo": {
"autolinking": {
"exclude": [
"expo-splash-screen"
]
}
}
- Add the plugin in your app.json:
{
"expo": {
- "splash": {
- "image": "./assets/splash.png",
- "resizeMode": "contain",
- "backgroundColor": "#ffffff"
- },
+ "plugins": [
+ ["react-native-bootsplash", { "assetsDir": "assets/bootsplash" }]
+ ]
}
}
と、Expo の設定が簡易化されたようですね。
【Yoga】 v3.1 を発表
Yoga から v3.1 が発表されました！
Yoga は React Native のレイアウトエンジンで、Flex などの CSS 表現をネイティブの表現に変換するための機能を持ちます。
v3.1の特徴的な変更は、gap でのパーセント表現をサポートです。以下のように、gap に%が利用可能になります。
<Layout config={{ useWebDefaults: true }}>
<Node
style={{
columnGap: '10%',
width: 200,
height: 100,
}}
>
<Node style={{ flexGrow: 1 }} />
<Node style={{ flexGrow: 1 }} />
<Node style={{ flexGrow: 1 }} />
</Node>
</Layout>
v3.1 は React Native の次世代バージョンである v0.75 に搭載される予定だそうです。
心待ちにしておきましょう。
React Native 関連情報
React Native Reanimated に Example Page を登場
React Native Reanimated に Example Page が登場しました！
これは React Native Reanimated を利用した Cookbook です。
アコーディオンやスライダー、スイッチなどよく使うアニメーションが多数含まれているので、「あれ？どうやって実装するんだっけ？」を簡単に解決できるようになりました。
こういう地味にありがたいドキュメントをちゃんと整備してくれることろがReanimatedのいいところですね。
最後に
ここまで読んでいただきありがとうございました。
もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！
Discussion