Bun で expo + React Native のプロジェクトを始める

Bun をインストール

shell

curl -fsSL https://bun.sh/install | bash

https://bun.sh/

Bun で expo のプロジェクトを作る

shell

bun create expo

One second you’re running:

$ bun create expo

The next second you’re developing a universal React app with @Expo… https://t.co/k0CtvyoQAV
— Evan Bacon 🥓 (@Baconbrix) September 11, 2023

bun で作成した expo プロジェクトでシミュレーターを立ち上げるためには、以下のようなコマンドを実行すればOKです。

shell

cd my-app
bun run android
bun run ios
bun run web

Bun + expo で TypeScript のプロジェクトを作る

shell

bun create expo -t expo-template-blank-typescript

実行コマンドは同じです。

shell

- cd my-app
- bun run android
- bun run ios
- bun run web

ただし、作られるファイルは App.tsx のように TypeScript ベースになります。

Expo Router をインストールしてみる

以下のコマンドで Bun のプロジェクトにライブラリをインストールできます。

shell

bun expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler

shell

bun expo install react-native-web react-dom

Expo Router を動作させるまで

package.json の main を変更します。

package.json

{
  "main": "expo-router/entry"
}

app.json に scheme を設定します。 DeepLink に使うためっぽいです。

web > bundler も設定追加します。

app.json

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "scheme": "my-app",
省略
    "web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro"
    },

babel.config.js に plugin を追加します。

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};

shell

mkdir -p src/app
touch src/app/_layout.tsx
touch src/app/index.tsx

src/app/index.tsx を以下のようにします。

index.tsx

import { Text } from 'react-native';
export default function Root() {
  return <Text>Home Page</Text>
}

iOS シミュレーターを立ち上げます。

shell

bun run ios

すると、シミュレーターに Home Page と表示されます。

参考

Install Expo Router

Expo Documentation