Maatai SDK is a React Native SDK that enables Maatai clients to embed their service into a React Native application.
To install the SDK, make sure to follow these steps:
Ensure that react-native-webview
is installed in your project:
yarn add react-native-webview
# o
npm install react-native-webview
Ensure that react-native-permissions
is installed in your project:
yarn add react-native-webview
# o
npm install react-native-webview
yarn add @maat-ai/maatai-sdk-rn
# o
npm install @maat-ai/maatai-sdk-rn
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" />
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',
+ ])
cd ios
pod install
cd ..
Below is an example of how to use Maatai SDK in your React Native application:
import React from 'react';
import { SafeAreaView, Button, StyleSheet } from 'react-native';
import { useMaatai } from '@maat-ai/maatai-sdk-rn'; // ==>>> Maatai SDK
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;
This hook provides a simple way to open the service.
-
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).
-
open
: A function that opens the service. -
WebMaatComponent
: A component that renders the service.
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;
Maatai SDK is licensed under the MIT License.