Im currently new to react native and im following up on the docs but while running the npx create-expo-app@latest, i realised that the babel.config.js file is not being created. I have tried looking for a solution to it through the net and docs but i came out empty handed. Anyone have a clue on how to solve this issue?

here is my package.json

{
  "name": "slade",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.7",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.6",
    "expo-splash-screen": "~0.29.11",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.3",
    "expo-web-browser": "~14.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.2",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.0.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "tailwindcss": "^3.4.15"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

Im currently new to react native and im following up on the docs but while running the npx create-expo-app@latest, i realised that the babel.config.js file is not being created. I have tried looking for a solution to it through the net and docs but i came out empty handed. Anyone have a clue on how to solve this issue?

here is my package.json

{
  "name": "slade",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.7",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.6",
    "expo-splash-screen": "~0.29.11",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.3",
    "expo-web-browser": "~14.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.2",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.0.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "tailwindcss": "^3.4.15"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

• react-native
• expo
• nativewind

2 Answers 2

If your project requires a custom Babel configuration, you need to create the babel.config.js file in your project by following the steps below:

1. Navigate to the root of your project, run the following command inside a terminal

npx expo customize

2. This command prompts generating different config files. Select babel.config.js.

3. The babel.config.js file is created in the root of your project with the default configuration as shown below:

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

Expo Docs

Why isn’t the babel.config.js file being created when using npx create-expo-app@latest with expo-router?

When using expo-router, the Babel configuration (babel.config.js) is handled internally by Expo and expo-router. Starting with expo-router, this file might not be created by default, as the framework manages most of the configuration automatically to keep the setup lightweight and modern.

However, if you need to customize the Babel configuration (e.g., for plugins or specific presets), you can manually create the file. Here's how:

Solution:

1. Manually Create the babel.config.js File
   In the root of your project, create a new file named babel.config.js.

2. Add the Default Configuration
   Copy and paste the following content into the file:

   module.exports = function (api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'],
       plugins: [
         // Add any Babel plugins here if needed
       ],
     };
   };
   

3. Restart Your Project
   Clear the Metro bundler cache and restart your project to apply the changes:

   expo start -c
   

   The -c flag clears the cache.

This worked perfectly for me, and I was able to customize my Babel setup.