【2025年最新版】Expo/React Nativeの開発環境を構築する

2025年最新のReact Nativeの開発環境を構築します

解説動画

YouTubeに解説動画を公開しています。 こちらもあわせて、ぜひご覧ください。

開発環境

• Bun
• Expo
• React Native
• TypeScript
• NativeWind

前提条件

構築するディレクトリを2025-newest-expo-setupという名前で準備しています。 みなさんは、ご自身がお好きな名前で構築してください。

構築の流れ

最初からExpo Routerがインストールされているテンプレートが用意されています。 だた初心者にはファイルが多すぎて、どこを変更すればいいのかわからないと思います。 事実、私もそうでした。 なので、今回はExpoからExpo Routerの順番にインストールします。 手間はかかりますが、理解が深まりますので、地道に進めましょう。

Expoをインストール

1. ExpoとExpo Routerをセットアップする
2. NativeWindをセットアップする

https://docs.expo.dev/get-started/create-a-project/ https://docs.expo.dev/guides/using-bun/#start-a-new-expo-project-with-bun

上記のドキュメントを参考にして、以下のコマンドを実行します。

bun create expo ./ --template blank-typescript

コマンドを見ると、templateオプションを追加してblank-typescriptを指定します。 これを指定すると、typescriptが採用された最低限のプロジェクトが作成されます。

Expo Routerをインストール

https://docs.expo.dev/router/installation/#manual-installation

1. 必要なパッケージをインストールする

まずは、以下のパッケージをインストールします。

• expo-router
• react-native-safe-area-context
• react-native-screens
• expo-linking
• expo-constants
• expo-status-bar

以下のコマンドを実行します。

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

2. セットアップエントリポイントを設定する

package.jsonのmainをindex.tsからexpo-router/entryに変更します。

- "main": "index.ts"
+ "main": "expo-router/entry"

3. プロジェクト構成を変更する

app.jsonにschemeを追加します。

+ "scheme": "2025-newest-expo-setup-scheme"

4. babel.config.jsを作成する

babel.config.jsを作成します。

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

5. バンドラキャッシュをクリアする

Babelの設定ファイルを更新したら、bundlerキャッシュをクリアする必要があります。 オプションでclearを指定すると、キャッシュをクリアできます。

bun start --clear

起動しましたが、appディレクトリを作成して、index.tsxを作成するように指示されます。 Expo Routerは、appディレクトリがルートディレクトリになるからです。 appディレクトリの作成から、ファイルを作成します。

タブレイアウトを作成する

Expo Routerを使うと、いろんなレイアウトを作成することができます。 今回は、タブレイアウトを作成します。 以下のようなファイル構成になります。

📁 app/
   ├── 📄 _layout.tsx
   └── 📁 (tabs)/
       ├── 📄 _layout.tsx
       ├── 📄 index.tsx
       └── 📄 settings.tsx

1. app/_layout.tsxを作成する

appディレクトリ直下に_layout.tsxを作成します。

import { Stack } from 'expo-router/stack';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

2. app/(tabs)/_layout.tsxを作成する

appディレクトリの中に(tabs)ディレクトリを作成し、その中に_layout.tsxを作成します。

import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: 'blue' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
        }}
      />
    </Tabs>
  );
}

3. app/(tabs)/index.tsxを作成する

appディレクトリの中に(tabs)ディレクトリを作成し、その中にindex.tsxを作成します。

import { View, Text, StyleSheet } from 'react-native';

export default function Tab() {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

4. app/(tabs)/settings.tsxを作成する

appディレクトリの中に(tabs)ディレクトリを作成し、その中にsettings.tsxを作成します。

import { View, Text, StyleSheet } from 'react-native';

export default function Tab() {
  return (
    <View style={styles.container}>
      <Text>Settings</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

NativeWindをインストール

https://www.nativewind.dev/getting-started/installation

1. 必要なパッケージをインストールする

まずは、以下のパッケージをインストールします。

• nativewind
• tailwindcss@^3.4.17
• react-native-reanimated@3.16.2
• react-native-safe-area-context

以下のコマンドを実行します。

bun install nativewind tailwindcss@^3.4.17 react-native-reanimated@3.16.2 react-native-safe-area-context

2. Tailwind CSSをセットアップする

npx tailwindcss initを実行して、tailwind.config.jsを作成します。

npx tailwindcss init

tailwind.config.jsにすべてのコンポーネントファイルへのパスを追加します。

- content: [],
+ content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+ presets: [require("nativewind/preset")],

global.cssを作成します。

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Babelにpresetを追加する

babel.config.jsのpresetにnativewindの設定を追加します。

- presets: ["babel-preset-expo"],
+ presets: [
+   ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+   "nativewind/babel",
+ ],

4. metro.config.jsを作成する

metro.config.jsを作成します。

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })

5. TypeScriptの設定する

https://www.nativewind.dev/getting-started/typescript

nativewind-env.d.tsを作成します。

/// <reference types="nativewind/types" />

6. global.cssファイルをインポートする

global.cssをインポートします。 Expo Routerでは、appディレクトリ直下の_layout.tsxにインポートします。

+ import "../global.css"

NativeWindの確認

index.tsxを開いて、スタイルをCSSからTailwind CSSに変更します。

  import { View, Text, StyleSheet } from 'react-native';
  
  export default function Tab() {
    return (
-     <View style={styles.container}>
+     <View className="bg-red-500 flex-1 justify-center items-center">
        <Text>Home</Text>
      </View>
    );
  }
  
- const styles = StyleSheet.create({
-   container: {
-     flex: 1,
-     justifyContent: 'center',
-     alignItems: 'center',
-   },
- });

適用されたTailwind CSSを確認するために、以下のコマンドを実行します。

bun start

背景色が赤色になっていれば、Tailwind CSSが適用されています。