React Native SDK Setup AppRemark

To integrate AppsOnAir AppRemark React Native SDK to your React Native Apps, follow the below steps

apiKey Setup

Make sure to configure the API key properly. For additional information Getting started

Step 1. iOS Requirements and setup

1.1 Requirements

Minimum deployment target: 12.0
This pod requires photo permissions. Add the following usage description to your Info.plist:

Info.plist
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) need permission to choose image from gallery for App Remark feature.</string>

Step 2. Android Requirements and setup

2.1 Requirements

JAVA 11 required
An Android 7.0+ device or emulator.
Project using AndroidX.
compileSDKVersion set to 34 or higher.
Targets API level 24 (NOUGAT) or higher
Android Gradle Plugin (AGP): Version 8.0.2 or higher
Gradle version 8.0 or higher
Kotlin Version 1.7.10 or higher
Uses Jetpack (AndroidX), which includes meeting these version requirements:
- compileSdkVersion 34 or later
Set up a physical device or use an emulator to run your app.
Create or login to your AppsOnAir (AoA) Account
Goto the your app details page -> App services tab -> API key tab to get your AoA services API Key

Step 3. Add the AppRemark Service in React Native code and usage

3.1 Installing package

NPM
Yarn

Terminal

 $ npm i appsonair-react-native-appremark

Terminal

 $ yarn add appsonair-react-native-appremark

for IOS

Don't forgot to install pods! (for iOS)

3.2 Import

App.tsx
import { initialize } from "appsonair-react-native-appremark";

Step 4. Initializing the Service and Customizing Its Theme

4.1 Initialize the service:

App.tsx
useEffect(() => {
  // Initialize AppRemark with custom theme configuration
  initialize(
    true // Set shakeGestureEnable true or false as per your need
  );
}, []);

Initialize the AppRemarkService with default "Add Remark" screen.
The AppRemarkService initialization allows you to integrate remark functionality. By default, the shake gesture is enabled shakeGestureEnable: true, allowing the device to capture the current screen on a shake. To disable this behavior, you can explicitly set shakeGestureEnable to false.

4.2 Customize the "Add Remark" Screen

Customize the "Add Remark" screen theme according to your app theme by passing options containing key-value pairs.
Available keys of options for Customization

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`	String	`"Add description here..."`	Set description hint text
`descriptionMaxLength`	int	`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 text field label color
`hintColor`	String	`"#B1B1B3"`	Set text field hint color
`inputTextColor`	String	`"#000000"`	Set text field input text color

App.tsx
useEffect(() => {
  // Initialize AppRemark with custom theme configuration
  initialize(
    true, // Set shakeGestureEnable true or false as per your need
    {
      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",
    } // Optional options to pass for customizing AppRemark NativeUI Theme
  );
}, []);

Step 5. Opening the AppRemark Screen Manually

5.1 Navigating to Add Remark Screen:

Use the addRemark method to open the "Add Remark" screen manually.

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

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

5.2 Send Custom Payload

Send additional meta-data by passing extraPayload as key-value pairs.

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

// Button to navigate to Add Remark screen
<Button title="Add Remark" onPress={() => addRemark({ key: "value" })} />;

Step 6. Run your App and Setup your app remark services

Run your app by using core editor on Android/IOS simulators or any physical device to make sure it builds correctly.

note

All submitted screenshots and feedback will be displayed on a web portal.

Step 1. iOS Requirements and setup​

1.1 Requirements​​

Step 2. Android Requirements​ and setup​

2.1 Requirements​​

Step 3. Add the AppRemark Service in React Native code and usage​

3.1 Installing package​

3.2 Import​

Step 4. Initializing the Service and Customizing Its Theme​

4.1 Initialize the service:​

4.2 Customize the "Add Remark" Screen​

Step 5. Opening the AppRemark Screen Manually​

5.1 Navigating to Add Remark Screen:​

5.2 Send Custom Payload​

Step 6. Run your App and Setup your app remark services​

For more details explore the example​