.babelrc

{
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
      [
        "module-resolver",
        {
          "root": ["./src"], //  This says the root of your project folder
          // To make your imports look better
          // Insert your whatever name to make alias for the imports
          // In this example I'm using @components to referring the components folder
          // That located inside src folder.
          // Note: You can make a lot of aliases in here
          "extensions": [
            ".ios.ts",
            ".android.ts",
            ".ts",
            ".ios.tsx",
            ".android.tsx",
            ".tsx",
            ".jsx",
            ".js",
            ".json"
          ],
  
          "alias": {
            "@components": "./src/components",
            "@assets": "./src/assets",
            "@constants": "./src/constants",
            "@api": "./src/api",
            "@store": "./src/store",
            "@styles": "./src/styles",
            "@util": "./src/util",
            "@type": "./src/type",
            "@navigation": "./src/navigation",
            "@animation": "./src/assets/animation",
            "@image": "./src/assets/image",
            "@svg": "./src/assets/svg",
            "@home": "./src/module/home",
            "@auth": "./src/module/auth",
            "@translation": "./src/translation"
          }
        }
      ],
      ["module:react-native-dotenv"]
    ]
  }