Feat/expo sdk

content/docs/expo/installation.mdx

@@ -0,0 +1,131 @@
+---
+title: Installation
+description: Welcome to the first step in integrating Reclaim Protocol into your React Native Expo project! This guide will walk you through the installation process and help you get started quickly.
+---
+
+## Prerequisites
+
+Before starting, ensure you have the following requirements installed:
+- Node.js (version 16.0.0 or later)
+- npm (Node Package Manager, included with Node.js) or yarn
+- A working React Native Expo project
+  - If you haven't created one, run: `npx create-expo-app@latest my-app`
+
+<Callout type="info">
+Make sure your Expo project is properly configured and can run successfully before installing the SDK.
+</Callout>
+
+## Installation
+
+### 1. Install the SDK
+
+Navigate to your React Native Expo project's root directory and execute one of the following commands:
+
+Using npm:
+```bash
+npm install @reclaimprotocol/reactnative-sdk
+```
+
+Using yarn:
+```bash
+yarn add @reclaimprotocol/reactnative-sdk
+```
+
+Using Expo CLI:
+```bash
+npx expo install @reclaimprotocol/reactnative-sdk
+```
+
+### 2. Expo Configuration
+
+Since the Reclaim SDK uses native modules and deep linking, you need to configure your Expo project properly.
+
+#### Update app.json/app.config.js
+
+Add the following configuration to your `app.json` or `app.config.js`:
+
+```json
+{
+  "expo": {
+    "name": "Your App Name",
+    "slug": "your-app-slug",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "scheme": "your-app-scheme",
+    "plugins": [
+      "expo-router",
+      "expo-splash-screen",
+      "expo-web-browser"
+    ],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.yourcompany.yourapp"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "com.yourcompany.yourapp",
+      "intentFilters": [
+        {
+          "action": "VIEW",
+          "autoVerify": true,
+          "data": [
+            {
+              "scheme": "https",
+              "host": "your-domain.com"
+            }
+          ],
+          "category": ["BROWSABLE", "DEFAULT"]
+        }
+      ]
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}
+```
+
+<Callout type="warning">
+Replace `your-app-scheme`, `your-domain.com`, and package identifiers with your actual values.
+</Callout>
+
+
+## Next Steps
+
+Now that you've installed the SDK successfully, you can:
+
+1. Follow the [Usage](./usage) guide to create your first proof request
+2. Explore [Advance Options](../advance-options/advance-options) for customization
+
+### Troubleshooting
+
+Common issues and solutions:
+
+#### Metro bundler issues
+```bash
+# Clear Metro cache
+npx expo start --clear
+```
+
+#### Native module issues
+```bash
+# Rebuild development build
+eas build --profile development --platform all --clear-cache
+```
+
+<Callout type="tip">
+Keep your SDK and Expo SDK versions up to date by regularly checking for updates using `npx expo install --fix`.
+</Callout>

content/docs/expo/meta.json

@@ -0,0 +1,4 @@
+{
+    "title": "Expo SDK",
+    "pages": ["installation", "usage"]
+} 

content/docs/expo/usage.mdx

@@ -0,0 +1,147 @@
+---
+title: Usage
+description: Learn how to integrate and use Reclaim Protocol in your React Native Expo app, from initialization to handling proof requests and responses.
+---
+
+## Prerequisites
+
+Before implementing the Reclaim Protocol SDK in your React Native Expo application, ensure you have:
+
+- Installed the Reclaim Protocol SDK (detailed instructions in the [Installation Guide](./installation))
+- Obtained your credentials from the [Reclaim Developer Portal](https://dev.reclaimprotocol.org/):
+  - Application ID
+  - Application Secret
+  - Provider ID
+
+<Callout type="warning">Security Notice: Never include your Application Secret in client-side code or version control systems.</Callout>
+
+## Implementation Guide
+
+### 1. Import Required Dependencies
+
+Start by importing the necessary React Native, Expo, and Reclaim Protocol components:
+
+```javascript
+import React, { useState, useEffect } from 'react';
+import { View, Text, Button, Linking } from 'react-native';
+import { ReclaimProofRequest } from '@reclaimprotocol/reactnative-sdk';
+```
+
+### 2. SDK Initialization
+
+Configure the SDK with your credentials:
+
+```javascript
+const APP_ID = 'YOUR_APPLICATION_ID';
+const APP_SECRET = 'YOUR_APPLICATION_SECRET';
+const PROVIDER_ID = 'YOUR_PROVIDER_ID';
+
+async function initializeReclaim() {
+  const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);
+  return reclaimProofRequest;
+}
+```
+
+<Callout type="info">
+Replace the placeholder credentials with your actual values from the Reclaim Developer Portal.
+</Callout>
+
+### 3. Request URL Generation
+
+Create a verification request URL for users:
+
+```javascript
+async function generateRequestUrl(reclaimProofRequest) {
+  const requestUrl = await reclaimProofRequest.getRequestUrl();
+  console.log('Request URL:', requestUrl);
+  return requestUrl;
+}
+```
+
+### 4. Verification Session Management
+
+Set up the verification session listener:
+
+```javascript
+async function startVerificationSession(reclaimProofRequest, onSuccess, onError) {
+  await reclaimProofRequest.startSession({
+    onSuccess: onSuccess,
+    onError: onError,
+  });
+}
+```
+
+### 5. React Native Expo Component Implementation
+
+The following component demonstrates a complete integration of the Reclaim Protocol:
+
+```javascript
+function ReclaimDemo() {
+  // State management for URL and verification status
+  const [requestUrl, setRequestUrl] = useState('');
+  const [status, setStatus] = useState('');
+
+  useEffect(() => {
+    async function setup() {
+      try {
+        // Initialize SDK and generate request URL
+        const reclaimProofRequest = await initializeReclaim();
+        const url = await generateRequestUrl(reclaimProofRequest);
+        setRequestUrl(url);
+        setStatus('Ready to start verification');
+
+        // Start listening for verification results
+        await startVerificationSession(
+          reclaimProofRequest,
+          (proofs) => {
+            if (proofs) {
+              if (typeof proofs === 'string') {
+                // Handle custom callback URL response
+                console.log('SDK Message:', proofs);
+              } else if (typeof proofs !== 'string') {
+                // Handle default callback URL response
+                if (Array.isArray(proofs)) {
+                  // when using provider with multiple proofs, we get an array of proofs
+                  console.log('Proof received:', JSON.stringify(proofs.map(p => p.claimData.context)));
+                } else {
+                  // when using provider with a single proof, we get a single proof object
+                  console.log('Proof received:', JSON.stringify(proofs.claimData.context));
+                }
+              }
+              setStatus('Proof received!');
+            }
+          },
+          (error) => {
+            console.error('Verification failed', error);
+            setStatus(`Error: ${error.message}`);
+          }
+        );
+      } catch (error) {
+        console.error('Setup failed', error);
+        setStatus(`Setup failed: ${error.message}`);
+      }
+    }
+
+    setup();
+  }, []);
+
+  const openRequestUrl = () => {
+    if (requestUrl) {
+      Linking.openURL(requestUrl);
+    }
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Reclaim Demo</Text>
+      <Text>Status: {status}</Text>
+      {requestUrl && <Button title="Start Verification" onPress={openRequestUrl} />}
+    </View>
+  );
+}
+```
+
+
+## Advance Usage
+
+You can check out available functions in the SDK in the [Advance Options](../advance-options/advance-options) guide

content/docs/meta.json

@@ -9,7 +9,7 @@
     "android-kotlin",
     "flutter",
     "ionic",
-    "react-native-expo",
+    "expo",
     "onchain",
     "zkfetch",
     "ai-agent",