React native Question posted in
The official React Native documentation can be found here.

babel.config.js file not being created react native

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
}
Tags:

2

Answers


  1. 0

    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

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

    2. 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

    Login or Signup to reply.
  2. 0

    It seems that the file is no longer created automatically since the implementation of the new architecture.

    Here are the default contents of the babel.config.js file, which used to be generated automatically:

    module.exports = function(api)
{
    api.cache(true);
    return {presets: ['babel-preset-expo']};
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search