Expo + React Nativeの開発でBun使ってみた

Bunのインストール

Bunをインストールします、公式ドキュメントの手順で実施しました。

Installation | Bun Docs

Install Bun with npm, Homebrew, Docker, or the official install script.

bun.sh

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

BunでExpoプロジェクトの作成

Expo公式記事の手順で「expo-bun-sample」というプロジェクトを作成します。

Support for Bun in EAS and Expo CLI - Expo Changelog

Check out new updates from Expo on the Expo changelog.

expo.dev

> bun create expo expo-bun-sample

Expo開発環境の起動

従来のNode.jsと同じようにpackage.jsonに用意されているnpm scriptを利用します。

npm script(package.json)

  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },

Expo開発環境の立ち上げ

> bun run start

これまで通りのExpoプロジェクトを作ることがでました。

TypeScirptサポート

通常、Expo公式では「expo-template-blank-typescript」というテンプレートの利用を推奨しておりますが Bunの場合はまだ呼び出すことが出来なかったため、手動で対応します。

Use TypeScript

An in-depth guide on configuring an Expo project with TypeScript.

docs.expo.dev

App.jsのリネーム

App.js→ App.tsxにリネームします。 この状態で bun run start するとTypeScript利用のに必要なライブラリを求められるのでインストールします。

> mv App.js App.tsx
> bun run start

Starting Metro Bundler
? It looks like you're trying to use TypeScript but don't have the required dependencies installed. Would you like to install typescript@^5.1.3, @types/react@~18.2.14? › (Y/n)

これでTypeScriptサポートをすることが出来ました。

Expoモジュールの利用

Expoでは豊富なiOS/Androidのネイティブモジュールを利用することが出来ます。 今回はExpoモジュールの利用確認のために画像を表示するexpo-imageを使ってみました。

expo-imageのインストール

bun expo install でインストールします。

> bun expo install expo-image

画像の表示

App.tsxを修正してexpo-imageの Image コンポーネントで画像を表示します。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { Image } from 'expo-image';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Fusic Image Sample</Text>
      <Image
        style={styles.image}
        source="https://fusic.co.jp/img/logo01.png"
        contentFit="contain"
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 300,
    height: 300,
  },
});

これまで通りExpoモジュールが利用できることも確認できました。

まとめ

急激に勢いを上げてきたBunを日頃使っているExpoでもストレスフリーで使えることが分かりました。 今回は新規プロジェクトに対しての解説でしたが、Node.jsで動かしている既存プロジェクトに対しても 移行がスムーズに可能か今後調べていきたいと思います。