React Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, and more

本日、React Native 0.75のリリースを発表できることを嬉しく思います！このリリースでは、%値をサポートするYoga 3.1、New Architectureの安定化修正、React Native Frameworkの使用推奨の導入など、いくつかの機能を提供します。

ハイライト

• Yoga 3.1とレイアウト改善
• New Architecture安定化
• フレームワークの使用

破壊的変更

• TypeScriptのTouchablesはジェネリック式で型として使用できなくなりました
• minSdk 23とminIOSVersion 13.4をサポートする最後のバージョン
• Android: JSIModuleが削除されました
• Android: PopUp Menuがコアから削除されました
• iOS: Push Notifications非推奨作業が完了しました
• Community CLI: ram-bundleとprofile-hermesコマンドの削除

ハイライト

Yoga 3.1とレイアウト改善

React Native 0.74でYoga version 3.0を最後に出荷して以来、アプリケーションのための多くの改善と新しいレイアウト機能を継続的に提供してきました。React Native 0.75はYoga 3.1を搭載しており、新機能の詳細については公式Yogaのリリースブログ投稿で確認できます。

注目すべき、そして非常に要望の多かった機能は、ギャップや変換情報など様々な場所での%値のサポートです。

これらの機能はNew Architectureでのみ利用可能です。これらを使用したい場合は、移行を検討してください。

ギャップでのパーセンテージ値

0.75では、gap、columnGap、rowGapプロパティが%値を含む文字列をサポートするようになりました。例えば：

function App(): React.JSX.Element {
  return (
    <SafeAreaView
      style={{
        marginTop: 20,
        alignItems: 'center',
        flex: 1,
        rowGap: '20%',
      }}>
      <View style={{flex: 1, flexDirection: 'row', columnGap: '10%'}}>
        <View
          style={{
            backgroundColor: 'purple',
            width: 100,
            height: 100,
          }}
        />
        <View
          style={{
            backgroundColor: 'blue',
            width: 100,
            height: 100,
          }}
        />
        <View
          style={{
            backgroundColor: 'green',
            width: 100,
            height: 100,
          }}
        />
      </View>
      {/* 他のViewコンポーネント */}
    </SafeAreaView>
  );
}

変換でのパーセンテージ値

transformプロパティも、translate変換で%値を受け入れるようになりました。例えば、以下のコンポーネントは赤い四角のX座標を幅の100%、Y座標を高さの100%移動します：

function Translated() {
  return (
    <SafeAreaView
      style={{
        marginTop: 20,
        flex: 1,
        rowGap: '20%',
      }}>
      <View
        style={{
          backgroundColor: 'red',
          width: 100,
          height: 100,
          transform: [{translateY: '100%'}, {translateX: '100%'}],
        }}
      />
    </SafeAreaView>
  );
}

New Architecture安定化

React ConfでNew ArchitectureがBetaであることを発表して以来、安定性に関するいくつかのバグ修正と改善を提供してきました。私たちの目標は、New Architectureが近い将来に安定版と見なされることです。

修正したバグと欠落機能の例：

• AndroidでのadjustsFontSizeToFitの修正 (#44075)
• AndroidでインラインビューでtextAlignが動作しない問題の修正 (#44146)
• iOSでテキストベースラインが上に移動する問題の修正 (#44932)

Expoの方々と協力して、React Native DirectoryにNew Architectureサポート情報を追加し、ライブラリがNew Architectureをサポートしているかどうかがすぐに分かるようにしました。

TurboModulesでのjsi::Runtimeへのアクセス

過去には、ネイティブモジュールからjsi::Runtimeにアクセスする推奨方法がありませんでした。0.74で実験的APIを導入し、0.75でその安定性を発表できることを嬉しく思います。

iOSでの例：

@interface RCTSampleTurboModule() <RCTTurboModuleWithJSIBindings>
@end

#pragma mark - RCTTurboModuleWithJSIBindings
- (void)installJSIBindingsWithRuntime:(jsi::Runtime &)runtime {
  runtime.global().setProperty(runtime, "myGlobalFunction", jsi::Function::createFromHostFunction(...));
}

Androidでの例：

public class SampleTurboModule extends NativeSampleTurboModuleSpec implements TurboModuleWithJSIBindings {
  @Override
  public native BindingsInstallerHolder getBindingsInstaller();
}

フレームワークの使用

今年のReact Confで共有したように、React Nativeアプリを構築する推奨方法は、Expoなどのフレームワークを使用することです。

この推奨を反映するため、このバージョンには以下の変更が含まれています：

• /templateフォルダをreact-nativeパッケージから別のリポジトリreact-native-community/templateに移動
• 2024年12月31日をもってreact-native initコマンドを廃止

テンプレートのreact-native-community/templateへの移動

歴史的に、react-nativeはNPMパッケージ内に/templateフォルダを含んでおり、Community CLIが新しいプロジェクトを作成する際に使用していました。これにより、テンプレートの更新が遅くなっていました。

最新のフレームワーク使用推奨により、コアNPMパッケージ内に独断的なテンプレートを含めることは私たちのビジョンと一致しないと感じました。そのため、テンプレートを@react-native-community/templateパッケージに移動することにしました。

react-native initの廃止

歴史的に、react-native initはReact Nativeプロジェクトを作成するデフォルトコマンドでした。しかし、2024年において、このコマンドはフレームワークが提供するオンボーディング体験と同じものを提供しないと感じています。

2024年12月31日以降、initコマンドはプロジェクトを作成しなくなります。以下のいずれかを使用する必要があります：

• Expoなどのフレームワークを使用（npx create-expo-appなど）
• Community CLIを直接呼び出し（npx @react-native-community/cli init）

react-native configおよびinit以外のすべてのコマンドは通常通り動作し続けます。

オートリンクのパフォーマンス改善

オートリンクロジックを書き直してより高性能にしました。これにより、AndroidとiOSの両方でビルド速度が向上します。React Native 0.75では、Expoを使用している場合、オートリンクステップがAndroidで約6.5倍、iOSで約1.5倍高速になります。

破壊的変更

TypeScriptのTouchablesはジェネリック式で型として使用できなくなりました

TouchableOpacityとTouchableHighlightコンポーネントが関数コンポーネントに変換されました。これにより、値と型として使用できなくなりました。

import {TouchableHighlight} from 'react-native';
const ref = useRef<TouchableHighlight>(); 
// ^^^ TS2749: TouchableHighlight refers to a value, but is being used as a type here.
// Did you mean typeof TouchableHighlight?

代わりに、組み込みのReact型を使用する必要があります。