Setup & Installation

Register for your Client ID

Contact Miri at support@miri.ai to register for a Client ID.

Installation

Follow these steps to install and configure the SDK into your existing React Native application.

Prerequisites

  • Development environment: Make sure you have set up the development environment for React Native. You can find the official guide here: Getting Started with React Native.
  • NPM repository access: The Miri NPM repository is private. So, before you can install it, please share your NPM account with the Miri team so that access can be granted.

Add Miri SDK and its peer dependencies

To install the Miri React Native SDK, run the following command in your terminal:

// Yarn
yarn add @miri-ai/miri-react-native

// NPM
npm install @miri-ai/miri-react-native

Miri React Native SDK requires installing some peer dependencies to provide users with a robust experience.

Dependencies

The following highlights the dependencies required and purpose they serve.

All apps

  • @react-native-community/blur for blurred backgrounds for modals
  • @react-native-community/datetimepicker for editing dates and times
  • @react-native-picker/picker for picker inputs
  • lottie-react for loading animations on web
  • lottie-react-native for loading animations
  • react
  • react-native

Expo Managed Apps

  • expo-blur for blurred backgrounds for modals
  • expo-camera for using the device camera
  • expo-device for accessing device information
  • expo-image-picker for accessing the device gallery

Bare React Native Apps

  • react-native-device-info for accessing device information
  • react-native-image-picker for accessing the device gallery
  • react-native-linear-gradient for rendering linear gradients
  • react-native-picker-select for using native pickers for editing
  • react-native-segmented-picker for using segmented pickers for editing
  • react-native-svg for rendering SVG icons
  • react-native-vision-camera for accessing the device camera

Configuring permissions

Some dependencies require adding permissions to the `Info.plist` file in iOS and `AndroidManifest.xml` file in Android. Please follow the instructions for each of the dependencies listed above.

Example `info.plist` file with permissions

<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.</string>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera to share image in a message.</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your microphone for voice recording.</string>

Example `AndroidManifest.xml` file with permissions

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />