@transfergratis/react-native-sdk 0.1.2

package/README.md

@@ -0,0 +1,539 @@
+# TransferGratis KYC SDK
+
+A comprehensive KYC (Know Your Customer) SDK built with React Native and Expo, featuring advanced camera capabilities powered by react-native-vision-camera.
+
+## 🚀 Features
+
+✅ **Advanced Camera Integration** with react-native-vision-camera  
+✅ **Selfie Capture** with face detection overlay  
+✅ **Document Capture** with auto-focus and quality controls  
+✅ **Orientation Video Processing** for liveness detection  
+✅ **File Upload** with validation  
+✅ **Custom Overlays** and instructions  
+✅ **Permission Management** with graceful fallbacks  
+✅ **Multi-Platform Support** (iOS, Android)  
+✅ **TypeScript Support** with full type definitions  
+✅ **Expo Config Plugin** for easy setup  
+
+## 📦 Installation (Essentiel)
+
+```bash
+npm install @transfergratis/react-native-sdk react-native-vision-camera expo-location react-native-svg zustand
+```
+
+### Configuration Expo (app.json / app.config.js)
+
+Ajoutez le plugin à `app.json` (ou `app.config.js`) en vous basant sur l’exemple fourni. Le plugin applique les permissions caméra/micro et la localisation.
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-vision-camera",
+        {
+          "cameraPermissionText": "Cette application utilise la caméra pour la vérification d'identité KYC.",
+          "enableMicrophonePermission": true,
+          "microphonePermissionText": "Cette application utilise le microphone pour l'enregistrement vidéo."
+        }
+      ],
+      [
+        "@transfergratis/react-native-sdk/plugin",
+        {
+          "visionCamera": {
+            "cameraPermissionText": "Cette application utilise la caméra pour la vérification d'identité KYC.",
+            "microphonePermissionText": "Cette application utilise le microphone pour l'enregistrement vidéo."
+          },
+          "location": {
+            "locationPermissionText": "Cette application utilise la localisation pour vérifier votre identité et votre emplacement.",
+            "locationWhenInUsePermissionText": "Cette application utilise la localisation pour vérifier votre identité et votre emplacement.",
+            "enableBackgroundLocation": false
+          }
+        }
+      ]
+    ]
+  }
+}
+```
+
+### Android Setup
+
+The config plugin will handle Android permissions automatically. No additional setup required.
+
+## 🎯 Quick Start
+
+### Basic KYC Flow
+
+```tsx
+import React from 'react';
+import { LauchTransferGratisKYC } from '@transfergratis/react-native-sdk';
+
+export default function App() {
+  return (
+    <LauchTransferGratisKYC
+      apiKey="your-api-key"
+      onComplete={(result) => {
+        console.log('KYC completed:', result);
+      }}
+      onError={(error) => {
+        console.error('KYC error:', error);
+      }}
+    />
+  );
+}
+```
+
+### Advanced Camera Usage
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { EnhancedCameraView } from '@transfergratis/react-native-sdk';
+
+export default function CameraExample() {
+  const [showCamera, setShowCamera] = useState(true);
+
+  const handleCapture = (result) => {
+    if (result.success) {
+      console.log('Photo captured:', result.path);
+      setShowCamera(false);
+    } else {
+      console.error('Capture failed:', result.error);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <EnhancedCameraView
+        showCamera={showCamera}
+        cameraType="front"
+        instructions="Position your face in the frame"
+        onCapture={handleCapture}
+        onError={(error) => console.error('Camera error:', error)}
+        onClose={() => setShowCamera(false)}
+        quality="high"
+        enableFlash={true}
+        showCaptureButton={true}
+        showSwitchCamera={true}
+      />
+    </View>
+  );
+}
+```
+
+## 📚 API Reference
+
+### Components
+
+#### `EnhancedCameraView`
+
+The main camera component with full Vision Camera integration.
+
+```tsx
+interface EnhancedCameraViewProps {
+  instructions?: string;
+  showCamera: boolean;
+  cameraType?: 'front' | 'back';
+  style?: ViewStyle;
+  onCapture?: (result: CaptureResult) => void;
+  onError?: (event: { message: string }) => void;
+  onClose?: () => void;
+  enableFlash?: boolean;
+  enableHdr?: boolean;
+  quality?: 'low' | 'medium' | 'high';
+  showCaptureButton?: boolean;
+  showSwitchCamera?: boolean;
+  overlayComponent?: React.ReactNode;
+}
+```
+
+#### `VisionCameraView`
+
+A simpler camera component for basic use cases.
+
+```tsx
+interface VisionCameraViewProps {
+  instructions?: string;
+  showCamera: boolean;
+  cameraType?: 'front' | 'back';
+  style?: ViewStyle;
+  onCapture?: (result: CaptureResult) => void;
+  onError?: (event: { message: string }) => void;
+  onPermissionError?: () => void;
+  enableHdr?: boolean;
+  enableNightMode?: boolean;
+  quality?: 'low' | 'medium' | 'high';
+}
+```
+
+#### `SelfieCapture`
+
+Pre-configured component for selfie capture with KYC integration.
+
+```tsx
+// No props required - integrates with KYC store
+<SelfieCapture />
+```
+
+### Modules
+
+#### `VisionCameraModule`
+
+Core module for camera operations and permissions.
+
+```tsx
+import { VisionCameraModule } from '@transfergratis/react-native-sdk';
+
+// Request permissions
+const hasPermissions = await VisionCameraModule.requestAllPermissions();
+
+// Get camera devices
+const frontCamera = await VisionCameraModule.getFrontCameraDevice();
+const backCamera = await VisionCameraModule.getBackCameraDevice();
+
+// Check camera availability
+const isAvailable = await VisionCameraModule.isCameraAvailable();
+```
+
+## 🎨 Customization
+
+### Custom Overlay Example
+
+```tsx
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { EnhancedCameraView } from '@transfergratis/react-native-sdk';
+
+export default function CustomCameraExample() {
+  const customOverlay = (
+    <View style={styles.overlay}>
+      <View style={styles.faceFrame} />
+      <Text style={styles.instruction}>
+        Align your face with the frame
+      </Text>
+    </View>
+  );
+
+  return (
+    <EnhancedCameraView
+      showCamera={true}
+      overlayComponent={customOverlay}
+      onCapture={(result) => console.log(result)}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none',
+  },
+  faceFrame: {
+    width: 250,
+    height: 300,
+    borderWidth: 3,
+    borderColor: '#4CAF50',
+    borderRadius: 125,
+  },
+  instruction: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    padding: 10,
+    borderRadius: 8,
+  },
+});
+```
+
+### Orientation Video Processing
+
+The SDK now includes advanced liveness detection through orientation video processing. This feature captures and analyzes short videos to verify that a real person is present during the KYC process.
+
+#### Basic Usage
+
+```tsx
+import React from 'react';
+import { OrientationVideoCapture, KYCService } from '@transfergratis/react-native-sdk';
+
+const kycService = new KYCService('https://api.yourdomain.com', 'your-api-key');
+
+export default function LivenessDetection() {
+  return (
+    <OrientationVideoCapture
+      config={{
+        duration: 10,
+        orientations: ['center', 'left', 'right'],
+        instructions: {
+          center: 'Look straight ahead at the camera',
+          left: 'Turn your head to the left',
+          right: 'Turn your head to the right',
+        },
+        showPreview: true,
+        allowRetake: true,
+        maxRetakes: 3,
+      }}
+      onComplete={(result) => {
+        console.log('Liveness detection result:', result);
+        // Handle successful processing
+      }}
+      onError={(error) => {
+        console.error('Liveness detection error:', error);
+        // Handle error
+      }}
+      kycService={kycService}
+    />
+  );
+}
+```
+
+#### Using the Custom Hook
+
+```tsx
+import React from 'react';
+import { View, Text, Button } from 'react-native';
+import { useOrientationVideo, KYCService } from '@transfergratis/react-native-sdk';
+
+export default function LivenessDetectionHook() {
+  const kycService = new KYCService('https://api.yourdomain.com', 'your-api-key');
+  
+  const { state, actions } = useOrientationVideo(kycService, {
+    duration: 10,
+    maxRetakes: 2,
+  });
+
+  return (
+    <View>
+      {state.isRecording && <Text>Recording...</Text>}
+      {state.isProcessing && <Text>Processing...</Text>}
+      {state.error && <Text>Error: {state.error}</Text>}
+      
+      <Button title="Start Recording" onPress={actions.startRecording} />
+      <Button title="Process Video" onPress={actions.processVideo} />
+    </View>
+  );
+}
+```
+
+#### API Response Format
+
+The orientation video processing returns detailed results for each face orientation:
+
+```json
+{
+  "center": {
+    "captured": true,
+    "frame": 35
+  },
+  "right": {
+    "captured": true,
+    "frame": 98
+  },
+  "left": {
+    "captured": false,
+    "frame": null
+  }
+}
+```
+
+For more detailed information, see the [Orientation Video Processing Guide](./ORIENTATION_VIDEO_GUIDE.md).
+
+## 🔧 Configuration Plugin
+
+The SDK includes an Expo config plugin for automatic setup of native permissions and dependencies.
+
+### Plugin Options
+
+```tsx
+interface VisionCameraPluginProps {
+  cameraPermissionText?: string;
+  microphonePermissionText?: string;
+  enableFrameProcessors?: boolean;
+}
+```
+
+### Manual Plugin Usage
+
+```tsx
+import { withVisionCamera } from '@transfergratis/react-native-sdk/plugin';
+
+export default withVisionCamera(config, {
+  cameraPermissionText: "Custom camera permission message",
+  microphonePermissionText: "Custom microphone permission message",
+  enableFrameProcessors: false
+});
+```
+
+## 🛠️ Development
+
+### Building the SDK
+
+```bash
+cd transfergratis-sdk
+npm install
+npm run build
+```
+
+### Running the Example
+
+```bash
+cd transfergratis-sdk/example
+npm install
+npm run ios # or npm run android
+```
+
+## 🚀 Publication npm
+
+### Pré-requis
+
+- Compte npm avec droits de publication sur le package
+- Node 18+ et npm 9+
+
+### Étapes de release
+
+1) Installer et nettoyer
+
+```bash
+cd transfergratis-sdk
+npm ci
+npm run clean
+```
+
+2) Builder le SDK
+
+```bash
+npm run build
+```
+
+3) Vérifier le contenu qui sera publié
+
+```bash
+npm publish --dry-run
+npm pack
+tar -tf transfergratis-react-native-sdk-*.tgz | cat
+```
+
+4) Monter la version (exemples)
+
+```bash
+# patch | minor | major | prerelease
+npm version patch -m "release: %s"
+```
+
+5) Connexion npm (si nécessaire)
+
+```bash
+npm whoami || npm login
+```
+
+6) Publier sur npm (public)
+
+```bash
+npm publish --access public
+```
+
+- Avec 2FA:
+
+```bash
+npm publish --access public --otp=123456
+```
+
+- Publier une préversion (tag beta):
+
+```bash
+npm publish --tag beta --access public
+```
+
+7) Pousser les tags git
+
+```bash
+git push && git push --tags
+```
+
+8) Vérifier la version publiée
+
+```bash
+npm info @transfergratis/react-native-sdk version
+```
+
+## 📝 Migration from Legacy Camera
+
+If you're upgrading from the legacy native camera implementation:
+
+### Component Changes
+
+```tsx
+// Old (Legacy)
+import { NativeCameraView } from 'transfergratis-sdk';
+
+<NativeCameraView
+  instructions="Take a photo"
+  showCamera={true}
+  onCapture={(event) => {
+    if (event.action === 'capture') {
+      console.log(event.imagePath);
+    }
+  }}
+/>
+
+// New (Vision Camera)
+import { EnhancedCameraView } from 'transfergratis-sdk';
+
+<EnhancedCameraView
+  instructions="Take a photo"
+  showCamera={true}
+  onCapture={(result) => {
+    if (result.success) {
+      console.log(result.path);
+    }
+  }}
+/>
+```
+
+### Module Changes
+
+```tsx
+// Old
+import { NativeCameraModule } from 'transfergratis-sdk';
+const hasPermission = await NativeCameraModule.requestCameraPermission();
+
+// New
+import { VisionCameraModule } from 'transfergratis-sdk';
+const hasPermissions = await VisionCameraModule.requestAllPermissions();
+```
+
+## 🚨 Breaking Changes
+
+### v2.0.0
+
+- **Camera Implementation**: Switched from custom native views to react-native-vision-camera
+- **Permissions**: Now requires both camera and microphone permissions
+- **Component Props**: Updated prop interfaces for better type safety
+- **Config Plugin**: New plugin required for automatic permissions setup
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🆘 Support
+
+For support, email support@transfergratis.com or open an issue on GitHub.
+
+---
+
+Built with ❤️ by the TransferGratis Team

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Mon Aug 25 09:30:14 WAT 2025
+gradle.version=8.9

package/android/.gradle/config.properties

@@ -0,0 +1,2 @@
+#Mon Aug 25 09:26:20 WAT 2025
+java.home=/Applications/Android Studio.app/Contents/jbr/Contents/Home

package/android/.idea/gradle.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
+  <component name="GradleSettings">
+    <option name="linkedExternalProjectsSettings">
+      <GradleProjectSettings>
+        <option name="testRunner" value="CHOOSE_PER_TEST" />
+        <option name="externalProjectPath" value="$PROJECT_DIR$" />
+        <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
+        <option name="resolveExternalAnnotations" value="false" />
+      </GradleProjectSettings>
+    </option>
+  </component>
+</project>

package/android/.idea/migrations.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectMigrations">
+    <option name="MigrateToGradleLocalJavaHome">
+      <set>
+        <option value="$PROJECT_DIR$" />
+      </set>
+    </option>
+  </component>
+</project>

package/android/.idea/misc.xml

@@ -0,0 +1,9 @@
+<project version="4">
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/build/classes" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="Android" />
+  </component>
+</project>

package/android/.idea/runConfigurations.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RunConfigurationProducerService">
+    <option name="ignoredProducers">
+      <set>
+        <option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
+        <option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
+        <option value="com.intellij.execution.junit.PatternConfigurationProducer" />
+        <option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
+        <option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
+        <option value="com.intellij.execution.junit.testDiscovery.JUnitTestDiscoveryConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinJUnitRunConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinPatternConfigurationProducer" />
+      </set>
+    </option>
+  </component>
+</project>

package/android/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+  </component>
+</project>

package/android/build/.transforms/7ec900c0f64f5f1a7c88998dd44001b8/results.bin

@@ -0,0 +1 @@
+o/classes

package/android/build/.transforms/d6df0e53bfc3165a876965af720f910a/results.bin

@@ -0,0 +1 @@
+o/bundleLibRuntimeToDirDebug