AppsOnAir-react-native-AppRemark

Features Overview

• Submit App Remarks ✍️

  Easily report bugs, issues, or provide feedback and suggestions for app improvements.

• Shake Gesture for Screenshots 📸

  Automatically capture screenshots of your app by shaking the device. Highlight specific issues or suggest enhancements directly on the screenshots.

• Screenshot Annotation 🖍️

  Modify captured screenshots by drawing or marking areas to emphasize problems or recommendations.

• Customizable Remark Submission 🔧

  Users can disable the shake gesture and manually open the "Add Remark" screen to submit feedback.

To learn more about AppsOnAir AppRemark, please visit the AppsOnAir website.

Expo Setup

If you're working with this Expo project, make sure to run:

npx expo prebuild

Android Setup

Minimum Requirements

• Android Gradle Plugin (AGP): Version 8.0.2 or higher
• Kotlin: Version 1.7.10 or higher
• Gradle: Version 8.0 or higher

Add meta-data to the app's AndroidManifest.xml file under the application tag.

Make sure meta-data name is “AppsonairAppId”.

Provide your application id in meta-data value.

</application>
    ...
    <meta-data
        android:name="AppsonairAppId"
        android:value="********-****-****-****-************" />
</application>

iOS Setup

Minimum Requirements

iOS deployment target: 14.0

Provide your application id in your app info.plist file.

<key>AppsonairAppId</key>
<string>XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX</string>

Usage

Function 1: Initialize AppRemark with custom theme

Here users can customize the theme of "Add Remark" screen according to their app theme by passing options, which contains key-value pair of user's theme data.

import { useEffect } from 'react';
import { initialize } from 'appsonair-react-native-appremark';

useEffect(() => {
  // Initialize AppRemark with custom theme configuration
  initialize(true, {
    appBarBackgroundColor: '#1E1E2F',
    appBarTitleColor: '#FFFFFF',
    buttonBackgroundColor: '#0066CC',
    buttonTextColor: '#FFFFFF',
    pageBackgroundColor: '#F9F9F9',
    buttonText: 'Submit',
    appBarTitleText: 'Welcome',
    descriptionHintText: 'Enter your description here...',
    descriptionLabelText: 'Description',
    descriptionMaxLength: 100,
    hintColor: '#A9A9A9',
    inputTextColor: '#000000',
    labelColor: '#333333',
    remarkTypeLabelText: 'Remarks',
  });
}, []);

Users have to pass given keys into "options". Using "options", this SDK will set the theme of "Add Remark" screen.

Make sure keys are same as below.

| Key | DataType | Value | Description | | :---------------------- | :------- | :-------------------------- | :----------------------------- | | pageBackgroundColor | String | "#E8F1FF" | Set page background color | | appBarBackgroundColor | String | "#E8F1FF" | Set appBar background color | | appBarTitleText | String | "Add Remark" | Set appBar title text | | appBarTitleColor | String | "#000000" | Set appBar title color | | remarkTypeLabelText | String | "Remark Type" | Set remark type label text | | descriptionLabelText | String | "Description" | Set description label text | | descriptionHintText | int | "Add description here..." | Set description hint text | | descriptionMaxLength | String | 255 | Set description max length | | buttonText | String | "Submit" | Set button text | | buttonTextColor | String | "#FFFFFF" | Set button text color | | buttonBackgroundColor | String | "#007AFF" | Set button background color | | labelColor | String | "#000000" | Set textfield label color | | hintColor | String | "#B1B1B3" | Set textfield hint color | | inputTextColor | String | "#000000" | Set textfield input text color |

Function 2: Navigate to Add Remark screen on button press

Pressing the "Add Remark" button triggers the addRemark function, which navigates the user to the "Add Remark" screen.

import { addRemark } from "appsonair-react-native-appremark";

// Button to navigate to Add Remark screen
<Button title="Add Remark" onPress={addRemark} />;

Function 3: Passing additional MetaData

The function can accept an object with additional metadata (e.g., { key: 'value' }) which then can be sent with each feedback.

import { setAdditionalMetaData } from 'appsonair-react-native-appremark';

setAdditionalMetaData({
  userId: '*****',
  userEmail: '[email protected]',
});

Function 4: Handling AppRemark Submission Response

The onRemarkResponse listener allows you to listen for responses after an AppRemark is submitted. It provides a callback that is triggered once the feedback submission process is completed — either successfully or with an error.

import {
  onRemarkResponse,
  type EventInfo,
} from 'appsonair-react-native-appremark';

useEffect(() => {
  // Subscribe to AppRemark submission responses
  const remarkResponseSub = onRemarkResponse((event: EventInfo) => {
    console.log('Remark Response:', event);

    if (event.status === 'SUCCESS') {
      console.log('Feedback submitted successfully:', event.message);
    } else {
      console.log('Failed to submit feedback:', event.message);
    }
  });

  // Clean up the listener when the component unmounts
  return () => {
    remarkResponseSub?.remove();
  };
}, []);