@myop/react-native 0.0.1

package/README.md

@@ -0,0 +1,166 @@
+# @myop/react-native-host
+
+A React Native library for embedding Myop components via WebView.
+
+## Installation
+
+```bash
+npm install @myop/react-native-host
+```
+
+### Peer Dependencies
+
+Make sure you have the required peer dependencies installed:
+
+```bash
+npm install react-native-webview
+```
+
+## Usage
+
+### Basic Usage with Component ID
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { MyopComponent } from '@myop/react-native-host';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
+      <MyopComponent
+        componentId="your-component-id"
+        style={{ flex: 1 }}
+      />
+    </View>
+  );
+}
+```
+
+### Usage with Component Config
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { MyopComponent, IComponentInstanceConfig } from '@myop/react-native-host';
+
+export default function App() {
+  const componentConfig: IComponentInstanceConfig = {
+    id: 'component-instance-id',
+    componentId: 'your-component-id',
+    componentName: 'MyComponent',
+    skinSelector: {
+      // your skin selector config
+    }
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MyopComponent
+        componentConfig={componentConfig}
+        style={{ flex: 1 }}
+      />
+    </View>
+  );
+}
+```
+
+### With onLoad Callback
+
+The `onLoad` callback gives you access to the component instance after it loads, allowing you to execute commands:
+
+```tsx
+import React from 'react';
+import { View, Button } from 'react-native';
+import { MyopComponent } from '@myop/react-native-host';
+
+export default function App() {
+  const [myopInstance, setMyopInstance] = React.useState(null);
+
+  const handleLoad = (myopComponent) => {
+    setMyopInstance(() => myopComponent);
+    console.log('Myop component loaded!');
+  };
+
+  const executeCommand = () => {
+    if (myopInstance) {
+      myopInstance('.someMethod()');
+    }
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MyopComponent
+        componentId="your-component-id"
+        onLoad={handleLoad}
+        style={{ flex: 1 }}
+      />
+      <Button title="Execute Command" onPress={executeCommand} />
+    </View>
+  );
+}
+```
+
+## API
+
+### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `componentId` | `string` | No* | The ID of the component to load from Myop cloud |
+| `componentConfig` | `IComponentInstanceConfig` | No* | The complete component configuration object |
+| `style` | `StyleProp<ViewStyle>` | No | Custom styles for the component container |
+| `onLoad` | `(myopComponent: (command: string) => void) => void` | No | Callback fired when component loads, receives command executor function |
+
+\* Either `componentId` or `componentConfig` must be provided
+
+### Types
+
+#### IComponentInstanceConfig
+
+```typescript
+interface IComponentInstanceConfig {
+  id: string;
+  componentId: string;
+  componentName: string;
+  skinSelector: ISkinSelectorConfig;
+  nestedComponents?: IComponentInstanceConfig[];
+  resolvedExperiences?: IExperience[];
+  resolvedNestedComponents?: IComponentConfig[];
+  [key: string]: any;
+}
+```
+
+## How it Works
+
+The component uses a WebView to load and render Myop components. It:
+
+1. Loads the Myop SDK from the CDN
+2. Fetches the component configuration (if using `componentId`)
+3. Initializes the component inside the WebView
+4. Provides a bridge to execute commands on the loaded component
+
+## Requirements
+
+- React Native 0.60.0 or higher
+- React 16.8.0 or higher
+- react-native-webview 13.0.0 or higher
+
+## Development
+
+This project includes a demo Expo app for testing. To run the development app:
+
+```bash
+npm install
+npx expo start
+```
+
+## Building the Library
+
+```bash
+npm run build
+```
+
+## License
+
+MIT

package/dist/MyopComponent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { IComponentInstanceConfig } from './types';
+interface IPropTypes {
+    style?: StyleProp<ViewStyle> | undefined;
+    componentId?: string;
+    componentConfig?: IComponentInstanceConfig;
+    onLoad?: (myopComponent: (command: string) => void) => void;
+}
+export declare const MyopComponent: (props: IPropTypes) => React.JSX.Element;
+export {};
+//# sourceMappingURL=MyopComponent.d.ts.map

package/dist/MyopComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyopComponent.d.ts","sourceRoot":"","sources":["../src/MyopComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,SAAS,CAAC;AAGtD,UAAU,UAAU;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CAC/D;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,sBAqE9C,CAAA"}

package/dist/MyopComponent.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MyopComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_webview_1 = require("react-native-webview");
+const componentHost_html_1 = require("./componentHost.html");
+const MyopComponent = (props) => {
+    const webviewRef = (0, react_1.useRef)(null);
+    const myopComponent = (command) => {
+        var _a;
+        //TODO : return promise to data?
+        (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`
+                window.myopComponent${command}
+             `);
+    };
+    const onMessage = (event) => {
+        if (event.nativeEvent.data === 'COMPONENT_LOADED') {
+            if (props.onLoad) {
+                props.onLoad(myopComponent);
+            }
+            // webviewRef.current?.injectJavaScript(`
+            //     window.myopComponent.props.showPopupWOW();
+            //  `);
+        }
+        //  Alert.alert('Received from WebView', event.nativeEvent.data);
+    };
+    const fetchFromReactNative = async () => {
+        var _a;
+        try {
+            let componentConfig = null;
+            if (props.componentConfig) {
+                componentConfig = props.componentConfig;
+            }
+            else if (props.componentId) {
+                const res = await fetch(`https://cloud.myop.dev/flow?id=${props.componentId}&auto=true`);
+                componentConfig = await res.json();
+                componentConfig = componentConfig.item.components[0];
+            }
+            const encoded = encodeURIComponent(JSON.stringify(componentConfig));
+            //send it into the webview
+            (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`
+                loadMyopComponent(\`${encoded}\`);
+            `);
+        }
+        catch (err) {
+            console.error('Fetch failed:', err);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (webviewRef.current)
+            fetchFromReactNative().then();
+    }, [webviewRef]);
+    return (react_1.default.createElement(react_native_1.View, { style: props.style ? props.style : styles.root },
+        react_1.default.createElement(react_native_webview_1.WebView, { ref: webviewRef, originWhitelist: ['*'], source: { html: componentHost_html_1.HTML }, onMessage: onMessage, style: styles.webview, javaScriptEnabled: true, domStorageEnabled: true, mixedContentMode: "always" // allows HTTPS + HTTP content
+            , allowFileAccess: true, allowUniversalAccessFromFileURLs: true })));
+};
+exports.MyopComponent = MyopComponent;
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        flex: 1,
+        //  backgroundColor: 'red', // visible background
+    },
+    webview: {
+        flex: 1,
+        //backgroundColor: 'blue', // visible background behind HTML
+    }
+});
+//# sourceMappingURL=MyopComponent.js.map

package/dist/MyopComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyopComponent.js","sourceRoot":"","sources":["../src/MyopComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+C;AAC/C,+CAA8C;AAC9C,+DAA6C;AAG7C,6DAA0C;AASnC,MAAM,aAAa,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC/C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAU,IAAI,CAAC,CAAC;IAEzC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAE,EAAE;;QACvC,gCAAgC;QAC/B,MAAA,UAAU,CAAC,OAAO,0CAAE,gBAAgB,CAAC;sCACP,OAAO;cAC/B,CAAC,CAAC;IACZ,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,CAAC,KAAU,EAAE,EAAE;QAC7B,IAAI,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,kBAAkB,EAAE,CAAC;YAChD,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBACf,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YAChC,CAAC;YACD,yCAAyC;YACzC,iDAAiD;YACjD,OAAO;QACX,CAAC;QACD,iEAAiE;IACrE,CAAC,CAAC;IAGF,MAAM,oBAAoB,GAAG,KAAK,IAAI,EAAE;;QACpC,IAAI,CAAC;YAED,IAAI,eAAe,GAAG,IAAI,CAAC;YAE3B,IAAI,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,eAAe,GAAG,KAAK,CAAC,eAAe,CAAC;YAC5C,CAAC;iBAAM,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;gBAC3B,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,kCAAkC,KAAK,CAAC,WAAY,YAAY,CAAC,CAAC;gBAC1F,eAAe,GAAG,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC;gBACnC,eAAe,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACzD,CAAC;YAED,MAAM,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC;YAEpE,0BAA0B;YAC1B,MAAA,UAAU,CAAC,OAAO,0CAAE,gBAAgB,CAAC;sCACX,OAAO;aAChC,CAAC,CAAC;QAEP,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC;QACxC,CAAC;IACL,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO;YAClB,oBAAoB,EAAE,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACH,8BAAC,mBAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI;QAChD,8BAAC,8BAAO,IACJ,GAAG,EAAE,UAAU,EACf,eAAe,EAAE,CAAC,GAAG,CAAC,EACtB,MAAM,EAAE,EAAC,IAAI,EAAE,yBAAI,EAAC,EACpB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,OAAO,EACrB,iBAAiB,EAAE,IAAI,EACvB,iBAAiB,EAAE,IAAI,EACvB,gBAAgB,EAAC,QAAQ,CAAM,8BAA8B;cAC7D,eAAe,EAAE,IAAI,EACrB,gCAAgC,EAAE,IAAI,GACxC,CACC,CACV,CAAC;AACN,CAAC,CAAA;AArEY,QAAA,aAAa,iBAqEzB;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC7B,IAAI,EAAE;QACF,IAAI,EAAE,CAAC;QACP,iDAAiD;KACpD;IACD,OAAO,EAAE;QACL,IAAI,EAAE,CAAC;QACP,4DAA4D;KAC/D;CACJ,CAAC,CAAC"}

package/dist/componentHost.html.d.ts

@@ -0,0 +1,2 @@
+export declare const HTML = "\n   <!DOCTYPE html>\n    <html>\n      <head>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n          html, body {\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            height: 100%;\n            // background: #ffeb3b;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            font-family: sans-serif;\n          }\n          \n          #myop-container{\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            height: 100%;\n          }\n        </style>\n        \n        <script src=\"https://cdn.myop.dev/sdk/next/myop_sdk.min.js\"></script>\n\n      </head>\n      <body>\n                <div id=\"myop-container\">Loading</div>\n      <script>\n       \n    async function loadMyopComponent(configAsString) {\n         const componentConfig = JSON.parse(decodeURIComponent(configAsString));\n          //alert('loadMyopComponent');\n          const { hostSDK } = await window.myop.rootSDK.getHostModule();\n          const container = document.getElementById('myop-container');\n          //alert(container)\n           window.myopComponent = await hostSDK.loadComponent(componentConfig, container);    \n           window.ReactNativeWebView.postMessage('COMPONENT_LOADED');\n    } \n        </script>\n      </body>\n    </html>\n\n";
+//# sourceMappingURL=componentHost.html.d.ts.map

package/dist/componentHost.html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentHost.html.d.ts","sourceRoot":"","sources":["../src/componentHost.html.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,s7CA+ChB,CAAC"}

package/dist/componentHost.html.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTML = void 0;
+exports.HTML = `
+   <!DOCTYPE html>
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+          html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            // background: #ffeb3b;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-family: sans-serif;
+          }
+          
+          #myop-container{
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+        
+        <script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
+
+      </head>
+      <body>
+                <div id="myop-container">Loading</div>
+      <script>
+       
+    async function loadMyopComponent(configAsString) {
+         const componentConfig = JSON.parse(decodeURIComponent(configAsString));
+          //alert('loadMyopComponent');
+          const { hostSDK } = await window.myop.rootSDK.getHostModule();
+          const container = document.getElementById('myop-container');
+          //alert(container)
+           window.myopComponent = await hostSDK.loadComponent(componentConfig, container);    
+           window.ReactNativeWebView.postMessage('COMPONENT_LOADED');
+    } 
+        </script>
+      </body>
+    </html>
+
+`;
+//# sourceMappingURL=componentHost.html.js.map

package/dist/componentHost.html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentHost.html.js","sourceRoot":"","sources":["../src/componentHost.html.ts"],"names":[],"mappings":";;;AAAa,QAAA,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CnB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MyopComponent } from './MyopComponent';
+export type { IComponentInstanceConfig } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MyopComponent = void 0;
+var MyopComponent_1 = require("./MyopComponent");
+Object.defineProperty(exports, "MyopComponent", { enumerable: true, get: function () { return MyopComponent_1.MyopComponent; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,iDAAgD;AAAvC,8GAAA,aAAa,OAAA"}

package/dist/types.d.ts

@@ -0,0 +1,20 @@
+export interface ISkinSelectorConfig {
+    [key: string]: any;
+}
+export interface IExperience {
+    [key: string]: any;
+}
+export interface IComponentConfig {
+    [key: string]: any;
+}
+export interface IComponentInstanceConfig {
+    id: string;
+    componentId: string;
+    componentName: string;
+    skinSelector: ISkinSelectorConfig;
+    nestedComponents?: IComponentInstanceConfig[];
+    resolvedExperiences?: IExperience[];
+    resolvedNestedComponents?: IComponentConfig[];
+    [key: string]: any;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,mBAAmB,CAAC;IAClC,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC9C,mBAAmB,CAAC,EAAE,WAAW,EAAE,CAAC;IACpC,wBAAwB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}

package/dist/types.js

@@ -0,0 +1,5 @@
+"use strict";
+// Type definitions for Myop Component configuration
+// These types should match the types from myop-sdk
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA,oDAAoD;AACpD,mDAAmD"}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@myop/react-native",
+  "version": "0.0.1",
+  "description": "React Native component for embedding Myop components via WebView",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.lib.json",
+    "prepare": "npm run build",
+    "clean": "rm -rf dist",
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint",
+    "release": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-webview": ">=13.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "~5.9.2",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-webview": "^13.16.0",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "expo": "~54.0.12",
+    "expo-constants": "~18.0.9",
+    "expo-font": "~14.0.8",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.8",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.10",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.7",
+    "expo-web-browser": "~15.0.8",
+    "react-dom": "19.1.0",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-worklets": "0.5.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0"
+  },
+  "keywords": [
+    "react-native",
+    "myop",
+    "webview",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}

package/src/MyopComponent.tsx

@@ -0,0 +1,95 @@
+import React, {useEffect, useRef} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {WebView} from 'react-native-webview';
+import {StyleProp, ViewStyle} from 'react-native';
+import type {IComponentInstanceConfig} from './types';
+import {HTML} from './componentHost.html';
+
+interface IPropTypes {
+    style?: StyleProp<ViewStyle> | undefined;
+    componentId?: string;
+    componentConfig?: IComponentInstanceConfig;
+    onLoad?: (myopComponent: (command: string) => void) => void;
+}
+
+export const MyopComponent = (props: IPropTypes) => {
+    const webviewRef = useRef<WebView>(null);
+
+    const myopComponent = (command: string) => {
+       //TODO : return promise to data?
+        webviewRef.current?.injectJavaScript(`
+                window.myopComponent${command}
+             `);
+    }
+
+    const onMessage = (event: any) => {
+        if (event.nativeEvent.data === 'COMPONENT_LOADED') {
+            if (props.onLoad) {
+                props.onLoad(myopComponent);
+            }
+            // webviewRef.current?.injectJavaScript(`
+            //     window.myopComponent.props.showPopupWOW();
+            //  `);
+        }
+        //  Alert.alert('Received from WebView', event.nativeEvent.data);
+    };
+
+
+    const fetchFromReactNative = async () => {
+        try {
+
+            let componentConfig = null;
+
+            if (props.componentConfig) {
+                componentConfig = props.componentConfig;
+            } else if (props.componentId) {
+                const res = await fetch(`https://cloud.myop.dev/flow?id=${props.componentId!}&auto=true`);
+                componentConfig = await res.json();
+                componentConfig = componentConfig.item.components[0];
+            }
+
+            const encoded = encodeURIComponent(JSON.stringify(componentConfig));
+
+            //send it into the webview
+            webviewRef.current?.injectJavaScript(`
+                loadMyopComponent(\`${encoded}\`);
+            `);
+
+        } catch (err) {
+            console.error('Fetch failed:', err);
+        }
+    };
+
+    useEffect(() => {
+        if (webviewRef.current)
+            fetchFromReactNative().then();
+    }, [webviewRef]);
+
+    return (
+        <View style={props.style ? props.style : styles.root}>
+            <WebView
+                ref={webviewRef}
+                originWhitelist={['*']}
+                source={{html: HTML}}
+                onMessage={onMessage}
+                style={styles.webview}
+                javaScriptEnabled={true}
+                domStorageEnabled={true}       // allows localStorage, etc.
+                mixedContentMode="always"      // allows HTTPS + HTTP content
+                allowFileAccess={true}         // allows access to file:// if needed
+                allowUniversalAccessFromFileURLs={true} // allows requests when loaded from a local file
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        //  backgroundColor: 'red', // visible background
+    },
+    webview: {
+        flex: 1,
+        //backgroundColor: 'blue', // visible background behind HTML
+    }
+});

package/src/componentHost.html.ts

@@ -0,0 +1,48 @@
+export const HTML = `
+   <!DOCTYPE html>
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+          html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            // background: #ffeb3b;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-family: sans-serif;
+          }
+          
+          #myop-container{
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+        
+        <script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
+
+      </head>
+      <body>
+                <div id="myop-container">Loading</div>
+      <script>
+       
+    async function loadMyopComponent(configAsString) {
+         const componentConfig = JSON.parse(decodeURIComponent(configAsString));
+          //alert('loadMyopComponent');
+          const { hostSDK } = await window.myop.rootSDK.getHostModule();
+          const container = document.getElementById('myop-container');
+          //alert(container)
+           window.myopComponent = await hostSDK.loadComponent(componentConfig, container);    
+           window.ReactNativeWebView.postMessage('COMPONENT_LOADED');
+    } 
+        </script>
+      </body>
+    </html>
+
+`;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { MyopComponent } from './MyopComponent';
+export type { IComponentInstanceConfig } from './types';

package/src/types.ts

@@ -0,0 +1,25 @@
+// Type definitions for Myop Component configuration
+// These types should match the types from myop-sdk
+
+export interface ISkinSelectorConfig {
+    [key: string]: any;
+}
+
+export interface IExperience {
+    [key: string]: any;
+}
+
+export interface IComponentConfig {
+    [key: string]: any;
+}
+
+export interface IComponentInstanceConfig {
+    id: string;
+    componentId: string;
+    componentName: string;
+    skinSelector: ISkinSelectorConfig;
+    nestedComponents?: IComponentInstanceConfig[];
+    resolvedExperiences?: IExperience[];
+    resolvedNestedComponents?: IComponentConfig[];
+    [key: string]: any;
+}