Mopinion-react-native-sdk NPM

Mopinion for React Native

Easily collect in-app feedback with the Mopinion SDK for React Native.

Installation

To install the Mopinion SDK into your React Native Application:

In a terminal window, navigate to the root directory of your project and run:

npm install mopinion-react-native-sdk --save

Link icon font

npx react-native-asset -asset node_modules/mopinion-react-native-sdk/assets/fonts

Install peerDependencies, these have to be installed separately because they require linking of native modules.

npm install @react-native-async-storage/async-storage react-native-webview react-native-view-shot react-native-image-picker  --save

Install native modules:

cd ios && bundle exec pod install

When using the image upload functionality.

The SDK allows users to pick an image from her/his device to upload as a screenshot. To enable this on iOS, make sure to add the Privacy - Photo Library Usage Description permission to the Info.plist of your app in Xcode:

<key>NSPhotoLibraryUsageDescription</key>
<string>To use an image from your library as a screenshot</string>

Implementing the SDK

Import the MopinionDeployment component in your main app file:

import { MopinionDeployment } from 'mopinion-react-native-sdk'

Add a <MopinionDeployment /> component with your deployment ID to the top level of your app structure:

function YourApp() {
	//...
	return (
		<TopLevel>
			{
				//app content
			}
			<MopinionDeployment deploymentID="YOUR_DEPLOYMENT_ID" />
		</TopLevel>
	);
}

Trigger events from anywhere you might want to show a form.

Pro tip, preemptively implement event calls in relevant places throughout your application so other teams working with Mopinion can easily add or remove forms via the Mopinion platform without changes to your app code. Forms are only shown if the event matches parameters defined in your deployment.

import { MopinionSDK } from 'mopinion-react-native-sdk';

//...

<PurchaseButton
	onPress={() => {
		handlePurchase();
		MopinionSDK.event('purchase_completed);
	}}
/>

Passing meta data from your app into Mopinion forms

You can send an object of data along with the feedback sent by your users using the metaData prop. This is useful for passing along various metadata that you might want to have linked to a users feedback.

<MopinionDeployment
	//required
	deploymentID={'YOUR_ID_HERE'}
	//optional
	metaData={{
		meta:'value',
		meta2:'value2',
		meta3:'value3'
	}}
/>

Properties

Property	Description	Type
`deploymentID`	Required the identifier of your deployment	`string`
`metaData`	An object with string values which will be passed along as feedback when your users submit a form	`Record<string, string \\| number>`
`fireWhenReady`	Array of events to fire when the deployment is ready	`Array<string>`
`modalAnimationDuration`	Customize the animation duration of the feedback dialog (default: 400, set to 0 to disable animations)	`number`
`onOpen`	Callback fired when a form opens	`function`
`onFormLoaded`	Callback fired when a form configuration is loaded	`function`
`onClose`	Callback fired when a form closes after being open	`function`
`onFeedbackSent`	Callback fired when a feedback form has been fully submitted	`function`