【RN Update 2023年1月】React Native 0.71がリリース 他
はじめに
こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！
この記事では、今月のReact Nativeに関連するニュースを紹介します。
React Native 0.71がリリース
React Native 0.71がリリースされました！
0.71.0の主な特徴は以下の通りです。
- TypeScript デフォルト化
- Flexbox Gapの導入
- New Architecture関連 Update
TypeScript デフォルト化
公式ドキュメントのCreating a new applicationも修正されており、実際にApp.tsxが自動生成されるようになっていました。
v0.70.6以前
$ npx react-native init AwesomeTSProject --template react-native-template-typescript
v0.71.0以降
$ npx react-native init AwesomeProject
tsconfig.jsonの中身も以前のtemplateとほとんど変化がなく、@tsconfig/react-nativeのみです。
オトとりっぷでは、もともとTypeScriptで開発していましたので、「公式も対応したのかー」ぐらいの感想です。
Flexbox Gapの導入
CSSのGapが使えるようになったみたいです！
さっそく試してみましょう。
import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
const App = () => {
const DATA = Array.from({length: 30}).map((_, index) => ({id: index}));
const generateColor = () => {
const randomColor = Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, '0');
return `#${randomColor}`;
};
return (
<SafeAreaView>
<View style={styles.container}>
{DATA.map(item => {
return (
<View
style={[styles.item, {backgroundColor: generateColor()}]}
key={item.id}>
<Text>{item.id}</Text>
</View>
);
})}
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flexWrap: 'wrap',
flexDirection: 'row',
gap: 30,
},
item: {
height: 50,
width: 50,
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
実行結果が以下の通りです。
ちゃんとGapが有効になっていることが確認できました。
ちなみに、rowGapとcolumnGapを使うと縦横別々のGapを割り当てられました。
New Architecture関連 Update
New Architecture対応のために、native設定ファイルに変更が加えられています。
例えば、iOSだとAppDelegate.hが以下のように変更されています。
v0.70.6以前
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
v0.71.0以降
#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
@interface AppDelegate : RCTAppDelegate
@end
他にもAndroidのReact Native Gradle Plugin（RNGP）の配布方法の変更など、
3rd partyライブラリの対応が求められそうです。
Expo Router v1 リリース
Expo Routerという、新たなNavigationライブラリがリリースされました。
appディレクトリ内のファイル名とディレクトリを使用してルートを定義するようで、
<Link />コンポーネントを使用した、Next.jsっぽいルーディングが可能らしいです。
オトとりっぷでは、React Navigationを使用しています。
React NativeでWebを作成する際には検討してみてもいいかもしれません。
また、Expoでは他にもexpo-imageのベータ版公開など、精力的な開発がなされていますね。
簡単なアプリを作りたい時にExpoは重宝しそうです。
React Native Android Widget リリース
React Native Android Widgetというライブラリが発表されました。
ネイティブ側に触れることなくAndroid ウィジェットを作成できるライブラリらしいです。
iOSが含まれないのが残念ですが、それでもネイティブ側をさらなくていいのは朗報です。
ウィジェットを作成する際には検討してもいいかもしれません。
最後に
ここまで読んでいただきありがとうございました。
もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！
Discussion