fix: reconfigures the whole project to resolve the resolution error while installed from npm

Author: moeen-mahmud

example/app/(tabs)/_layout.tsx

@@ -1,7 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 import React from "react";
-// import { ExpandBarTab } from "react-native-floating-tab";
 
 import { Colors } from "@/constants/Colors";
 import { useColorScheme } from "@/hooks/useColorScheme";
@@ -17,11 +16,11 @@ export default function TabLayout() {
             }}
             initialRouteName="index"
             backBehavior="history"
-            // tabBar={props => <ExpandBarTab {...props} />}
             // tabBar={props => <RollingBallTab {...props} />}
             // tabBar={props => <SharpCurvyTab {...props} />}
             // tabBar={props => <SlideBarTab {...props} />}
             // tabBar={props => <ElevatedTab {...props} />}
+            // tabBar={props => <ExpandBarTab {...props} />}
         >
             <Tabs.Screen
                 name="calendar"

example/app/_layout.tsx

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import "react-native-reanimated";
 
 import { useColorScheme } from "@/hooks/useColorScheme";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();

example/babel.config.js

@@ -2,5 +2,6 @@ module.exports = function (api) {
     api.cache(true);
     return {
         presets: ["babel-preset-expo"],
+        plugins: ["react-native-reanimated/plugin"],
     };
 };

example/metro.config.js

@@ -0,0 +1,27 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
+
+/** @type {import('expo/metro-config').MetroConfig} */
+// const config = getDefaultConfig(__dirname);
+
+// module.exports = config;
+
+module.exports = (async () => {
+    let defaultConfig = await getDefaultConfig(__dirname);
+
+    const { transformer, resolver } = defaultConfig;
+
+    defaultConfig.transformer = {
+        ...transformer,
+        babelTransformerPath: require.resolve("react-native-svg-transformer"),
+    };
+
+    defaultConfig.resolver = {
+        ...resolver,
+        assetExts: resolver.assetExts.filter(ext => ext !== "svg"),
+        sourceExts: [...resolver.sourceExts, "svg"],
+    };
+
+    defaultConfig.resolver.resolverMainFields.unshift("sbmodern");
+    return defaultConfig;
+})();

example/package.json

@@ -16,6 +16,7 @@
     },
     "dependencies": {
         "@expo/vector-icons": "^14.0.2",
+        "@react-navigation/bottom-tabs": "^6.6.1",
         "@react-navigation/native": "^6.0.2",
         "expo": "~51.0.28",
         "expo-constants": "~16.0.2",
@@ -43,6 +44,8 @@
         "@types/react-test-renderer": "^18.0.7",
         "jest": "^29.2.1",
         "jest-expo": "~51.0.3",
+        "metro": "^0.80.12",
+        "react-native-svg-transformer": "^1.5.0",
         "react-test-renderer": "18.2.0",
         "typescript": "~5.3.3"
     },

example/yarn.lock

@@ -5,9 +5,10 @@
     "main": "build/index.js",
     "types": "build/index.d.ts",
     "files": [
-        "build",
-        "src"
+        "build/**/*",
+        "src/**/*"
     ],
+    "type": "module",
     "scripts": {
         "build": "expo-module build",
         "lint": "expo-module lint -- --fix",
@@ -19,6 +20,9 @@
     "eslintConfig": {
         "extends": "universe/native"
     },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
     "keywords": [
         "react-native",
         "expo",
@@ -65,6 +69,7 @@
     },
     "peerDependencies": {
         "@react-navigation/native": "*",
+        "@react-navigation/bottom-tabs": "*",
         "expo": "*",
         "react": "*",
         "react-native": "*",

package.json

@@ -12,6 +12,6 @@
         "jsx": "react-native"
     },
 
-    "include": ["./src"],
+    "include": ["./src/**/*"],
     "exclude": ["**/__mocks__/*", "**/__tests__/*"]
 }