@maat-ai/maatai-sdk-rn NPM

Maatai SDK

Maatai SDK is a React Native SDK that enables Maatai clients to embed their service into a React Native application.

Installation

To install the SDK, make sure to follow these steps:

1. Install React Native WebView

Ensure that react-native-webview is installed in your project:

 yarn add react-native-webview
 # o
 npm install react-native-webview

2. Install React Native Permissions

Ensure that react-native-permissions is installed in your project:

 yarn add react-native-webview
 # o
 npm install react-native-webview

3. Install Maatai SDK

yarn add @maat-ai/maatai-sdk-rn
# o
npm install @maat-ai/maatai-sdk-rn

4. Configure React Native Permissions Android

Add the following permissions to your application android/app/src/main/AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

5. Configure React Native Permissions iOS

Modify Podfile as follows

- # Resolve react_native_pods.rb with node to allow for hoisting
- require Pod::Executable.execute_command('node', ['-p',
-   'require.resolve(
-     "react-native/scripts/react_native_pods.rb",
-     {paths: [process.argv[1]]},
-   )', __dir__]).strip

+ def node_require(script)
+   # Resolve script with node to allow for hoisting
+   require Pod::Executable.execute_command('node', ['-p',
+     "require.resolve(
+       '#{script}',
+       {paths: [process.argv[1]]},
+     )", __dir__]).strip
+ end

+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')

platform :ios, min_ios_version_supported
prepare_react_native_project!

+ setup_permissions([
+  'Camera',
+  'LocationAccuracy',
+  'Microphone',
+  'PhotoLibrary',
+ ])

6. Configure iOS

cd ios
pod install
cd ..

Usage

Below is an example of how to use Maatai SDK in your React Native application:

Import the SDK

import React from 'react';
import { SafeAreaView, Button, StyleSheet } from 'react-native';
import { useMaatai } from '@maat-ai/maatai-sdk-rn'; // ==>>> Maatai SDK

Integrate the SDK into your Component

const MyComponent = () => {
  const { open, WebMaatComponent } = useMaatai({token: 'YOUR TOKEN'});

  return (
    <SafeAreaView style={styles.container}>
      <Button title="Open Maat" onPress={open} />
      <WebMaatComponent />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyComponent;

API

`useMaatai({ token, env, lang })`

This hook provides a simple way to open the service.

Parameters

token: Token provided by Maatai.
env: Environment the service points to, can be: 'production', 'develop', or 'sandbox'. (Optional, defaults to production)
lang: Language, can be: 'es' or 'en' (Optional, defaults to Spanish).

Retorna

open: A function that opens the service.
WebMaatComponent: A component that renders the service.

Complete Example

import React from 'react';
import { SafeAreaView, Button, StyleSheet } from 'react-native';
import { useMaatai } from 'maatai-sdk';

const App = () => {
  const { open, WebMaatComponent } = useMaatai('token');

  return (
    <SafeAreaView style={styles.container}>
      <Button title="Open Maat" onPress={open} />
      <WebMaatComponent />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;