# 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](https://documentation.appsonair.com) website.

## Expo Setup

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

```sh md title="Terminal"
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.

```sh
</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.

```sh
<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.

```typescript
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.

```typescript
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.

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

setAdditionalMetaData({
  userId: '*****',
  userEmail: 'test@example.com',
});
```

## 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.

```typescript
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();
  };
}, []);
```