React Native FeedbackSDK

A cross-platform Feedback component for React Native.

Installation

Install the package using either Yarn:

yarn add @originallyus/feedback-rn-sdk

or npm:

npm install @originallyus/feedback-rn-sdk

Install Peer Dependencies

These packages are specified as peerDependencies and need to be installed separately.

yarn add axios crypto-js \
react-native-encrypted-storage \
react-native-device-info \
react-native-rate

or using npm:

npm install axios crypto-js \
react-native-encrypted-storage \
react-native-device-info \
react-native-rate

Install Custom Fonts

Package requires custom fonts found in fonts folder:

OpenSans-Bold.ttf
OpenSans-Light.ttf
OpenSans-Regular.ttf
OpenSans-SemiBold.ttf

Please follow this guide to install fonts: Install Fonts to RN App

Please do not change the filenames as Android are using those to identify fonts. These filenames follows actual PostScript Name of the fonts.

Quick Start

Please initalize the SDK once in App.js. The mounting point of the SDK should be placed directly in your App.js for it to stay on top of all other views.

Note: XXXXXXXXXXX is to be replaced with correct class name. Please refer to the full documentation provided separately by us.

import XXXXXXXXXXX from '@originallyus/feedback-rn-sdk';

const App = (props) => {
  // This initialization should done once inside App.js
  const feedbackRef = useRef();
};

// in your render function
return (
  {/* The root view wrapper makes sure the app is full screen and vertical align center */}
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <YourAppContainerView></YourAppContainerView>

    {/* Please insert this mount point directly in your App.js,
        preferably at the bottom of your root view tree for it to stay on top of all other views */}
    <XXXXXXXXXXX ref={feedbackRef} />
  </View>
);

Optional inline feedback component

Place <FeedbackInlineSurvey /> component anywhere in your app view hierarchy where the feedback inline prompt should be shown.

• If <FeedbackInlineSurvey /> component is not present, feedback survey will shown as non-intrusive style
• The inline component may or may not be shown depends on configuration of the survey in backend

import { FeedbackInlineSurvey } from '@originallyus/feedback-rn-sdk';

return (
  ...
  <SomeContainerView>
    <FeedbackInlineSurvey />
  </SomeContainerView>
  ...
);

All other functions to be invoked on feedbackRef.current can be done anywhere in your application code (can also be inside App.js)

import XXXXXXXXXXX from '@originallyus/feedback-rn-sdk';

const OtherComponent = (props) => {
  // This is a singleton. The initialization should have already been done inside App.js
  const feedbackRef = useRef();

  const setupFeedbackSDK = () => {
    // Please contact us to obtain an App Secret specific to your Bundle ID/Package ID
    feedbackRef.current.setAppSecret('QcJasjiu2olMBxHyFohKJ');
  };

  const setLanguage = (language) => {
    // Use international language codes: "en", "zh", "zh_tw", "ms", "ta", "id", "th", "tl", "vi"
    // Note: our backend must be loaded with the translation content before a language can be used. Invalid languages will automatically fallback to English
    feedbackRef.current.setLanguage(language);
  };

  const setAppUserId = () => {
    // This is an optional User ID provided by the host app.
    feedbackRef.current.setAppUserId('1234');
  };

  const setMetadata = () => {
    // This is an optional metadata provided by the host app. Supports string format only.
    feedbackRef.current.setMetadata('policy_1234567890');
  };

  const testRatingForm = (eventTag) => {
    // This will always show the Feedback form for testing/debugging purpose
    // You may troubleshoot this in "Request (Testing)" section in CMS
    feedbackRef.current.setFormSlug('native_rating_form');
    feedbackRef.current.testRatingForm(eventTag);
  };

  const testInlineForm = (eventTag, slug) => {
    // This will always show the inline Feedback component for testing/debugging purpose
    // You may troubleshoot this in "Request (Testing)" section in CMS
    feedbackRef.current.testInlineForm(eventTag, slug);
  };

  const showRatingForm = (eventTag) => {
    // This may not always show/trigger the form, depending on the Response Frequency & Prompt Frequency configuration on backend
    // You may troubleshoot this in "Request" section in CMS
    feedbackRef.current.showRatingForm(eventTag);
  };

  const showInlineForm = (eventTag, slug) => {
    // This may not always show/trigger the form, depending on the Response Frequency & Prompt Frequency configuration on backend
    // You may troubleshoot this in "Request" section in CMS
    feedbackRef.current.showInlineForm(eventTag, slug);
  };
  
};

Callback Function (optional)

An optional callback function can be provided as parameter to capture the outcome of the SDK.

• formDidShow = false is triggered when there is no form to be shown, this callback function will be triggered almost immediately.
• formDidShow = true is triggered when has been shown and user has finished interacting with it or dismiss/cancel it

feedbackRef.current.testRatingForm(eventTag, (formDidShow) => {
  console.log('formDidShow', formDidShow);
});

feedbackRef.current.showRatingForm(eventTag, (formDidShow) => {
  console.log('formDidShow', formDidShow);
});

feedbackRef.current.showInlineForm(eventTag, slug, (formDidShow) => {
  console.log('formDidShow', formDidShow);
});

Extra configuration

To ensure that the External Survey works properly, check your AndroidManifest.xml file for the following configuration.

For the app targeting Android 11 (SDK 30) or higher need to implement.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="http" />
            <data android:scheme="https" />
        </intent>
    </queries>
    ...
    <!-- Another config -->
</manifest>