diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b116f0a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 GlamAR + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index e028f09..2ef1448 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,256 @@ -# glamar-react-native -GlamAR and React Native Integration +# GlamAR React Native + +**GlamAR React Native SDK** – Seamless integration of the GlamAR Web SDK into React Native apps using WebView. + +--- + +## πŸš€ Features + +- Loads GlamAR Web SDK inside a WebView +- Easy API: `init`, `applySku`, `applyByCategory`, `snapshot`, `reset`, etc. +- Event system: `photo-loaded`, `loaded`, `error`, etc. +- Handles permissions (Android/iOS) +- Fully customizable layout β€” WebView adapts to its container + +--- + +## πŸ“¦ Installation + +### 1. Add the SDK + +```bash +# Using npm +npm i @glamario/core-react-native + +# Using yarn +yarn add @glamario/core-react-native + +# Using pnpm +pnpm add @glamario/core-react-native +``` + +or manually + +Download glamAR react native Package And place it in your project root. + +Then update your `package.json`: + +```json +"dependencies": { + "@glamario/core-react-native": "glamar-react-native.tgz" +} +``` + +### 2. Install Required Peer Dependencies + +Ensure these exist in your app's `package.json`: + +```json + "react": ">=18 <20", + "react-native": ">=0.68.0", + "react-native-webview": ">=11.0.0", + "react-native-device-info": ">=10.0.0", + "react-native-permissions": ">=3.8.0" +``` + +Then run: + +```bash +npm install +``` + +### 3. Metro Configuration + +Update your `metro.config.js`: + +```js +const path = require("path"); +const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config"); + +const projectRoot = __dirname; +const appNM = (p) => path.join(projectRoot, "node_modules", p); +const defaultConfig = getDefaultConfig(projectRoot); + +module.exports = mergeConfig(defaultConfig, { + resolver: { + nodeModulesPaths: [path.join(projectRoot, "node_modules")], + extraNodeModules: { + react: appNM("react"), + "react/jsx-runtime": appNM("react/jsx-runtime"), + "react/jsx-dev-runtime": appNM("react/jsx-dev-runtime"), + "react-native": appNM("react-native"), + "react-native-webview": appNM("react-native-webview"), + scheduler: appNM("scheduler"), + "@babel/runtime": appNM("@babel/runtime"), + }, + }, +}); +``` + +--- + +## πŸ“· Camera Permissions + +### Android + +In `AndroidManifest.xml`: + +```xml + + +``` + +In `MainActivity.java`: + +```java +@Override +public void onPermissionRequest(final PermissionRequest request) { + runOnUiThread(() -> request.grant(request.getResources())); +} +``` + +### iOS + +In `Info.plist`: + +```xml +NSCameraUsageDescription +This app requires access to the camera for virtual try-on. +``` + +--- + +## 🧠 SDK Usage + +### Import + +```tsx +import { GlamAr, GlamArProvider } from "@glamario/core-react-native"; +``` + +### Initialize + +```tsx +GlamAr.init({ + apiKey: "YOUR_API_KEY", + platform: "react_native", +}); +``` + +### Listen to Events + +```tsx +useEffect(() => { + const sub1 = GlamAr.on("photo-loaded", (data) => console.log(data)); + const sub2 = GlamAr.on("loaded", () => console.log("Loaded")); + + return () => { + sub1?.remove?.(); + sub2?.remove?.(); + }; +}, []); +``` + +--- + +## πŸ” Full Integration Example + +```javascript +import React, { useEffect } from "react"; +import { SafeAreaView, View, Button, StyleSheet } from "react-native"; +import { GlamAr, GlamArProvider } from "@glamario/core-react-native"; + +export default function App() { + useEffect(() => { + GlamAr.init({ + apiKey: "YOUR_API_KEY", + platform: "react_native", + }); + + const sub1 = GlamAr.on("photo-loaded", (data) => console.log(data)); + const sub2 = GlamAr.on("loaded", () => console.log("Loaded")); + + return () => { + sub1?.remove?.(); + sub2?.remove?.(); + }; + }, []); + + return ( + + + + + + +