fully working with expo

Author: wesrisenmay-mx

example/app/index.tsx

@@ -1,16 +1,5 @@
-import { Text, View } from "react-native"
 import App from "./App"
 
 export default function Index() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}>
-      <Text>Test</Text>
-      <App />
-    </View>
-  )
+  return <App />
 }

example/metro.config.js

@@ -9,15 +9,22 @@ const sdkRoot = path.resolve(__dirname, "..")
 // Watch all files within the SDK
 config.watchFolders = [sdkRoot]
 
-// Map the SDK package to its source files
-config.resolver.nodeModulesPaths = [
-  path.resolve(__dirname, "node_modules"),
-  path.resolve(sdkRoot, "node_modules"),
+// Only use example's node_modules, not SDK's
+config.resolver.nodeModulesPaths = [path.resolve(__dirname, "node_modules")]
+
+// Blacklist React dependencies in SDK's node_modules to prevent duplicates
+config.resolver.blockList = [
+  new RegExp(`${sdkRoot}/node_modules/react/`),
+  new RegExp(`${sdkRoot}/node_modules/react-native/`),
+  new RegExp(`${sdkRoot}/node_modules/react-native-webview/`),
 ]
 
-// Ensure the SDK's source files are resolved
+// Force React dependencies to resolve from example's node_modules only
 config.resolver.extraNodeModules = {
   "@mxenabled/react-native-widget-sdk": sdkRoot,
+  react: path.resolve(__dirname, "node_modules/react"),
+  "react-native": path.resolve(__dirname, "node_modules/react-native"),
+  "react-native-webview": path.resolve(__dirname, "node_modules/react-native-webview"),
 }
 
 module.exports = config

example/package-lock.json

@@ -30,6 +30,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
+    "react-native-webview": "^13.0.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",