React Native SDK Setup

To integrate AppsOnAir AppSync 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

iOS Requirements and Setup

Requirements​

• iOS deployment target: 12.0

Setup

• If CFBundleDisplayName is not added in your app then added in your app Info.plist file.

Info.plist

<key>CFBundleDisplayName</key>
<string>YourAppName</string>

Android Requirements​ and Setup

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 Account

• Goto the your app details page -> App services tab -> API key tab to get your AppsOnAir services API Key

Setup

Add required code

• Add meta-data to the app's AndroidManifest.xml file under the application tag.
  • Make sure meta-data name is “com.appsonair.icon”.
  • Provide your application logo in meta-data value.

AndroidManifest.xml

</application>
    ...
    <meta-data
            android:name="com.appsonair.icon"
            android:resource="@mipmap/ic_launcher" />
</application>

Add the AppSync Service in React Native code and usage

Installing Package

NPM

Terminal

npm i appsonair-react-native-appsync

Yarn

Terminal

yarn add appsonair-react-native-appsync

for IOS

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

Import

App.tsx

import { sync, type AppSyncResponse } from "appsonair-react-native-appsync";

Call sync in useEffect with Default Design

App.tsx

const [data, setData] = useState<AppSyncResponse | null>(null);

useEffect(() => {
  sync().then((res) => {
    setData(res);
  });
}, []);

Initialization

Make sure to call sync() method in App.tsx!

Call sync in useEffect with Custom Design

App.tsx

const [data, setData] = useState<AppSyncResponse | null>(null);

useEffect(() => {
  sync({ showNativeUI: false }).then((res) => {
    setData(res);

    // Custom alert for android app update
    if (res.updateAvailable) {
      Alert.alert(
        "Update Available",
        "A new version of the app is available. Please update to the latest version.",
        [
          {
            text: "OK",
            onPress: () => Linking.openURL(res.updateData.updateLink!),
          },
        ]
      );
    }
  });
}, []);

Run Your App and Set Up Your App Update and/or Maintenance Services

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

note

Note that to check the App Update and maintenance services are only configured from AppsOnAir portal.

For more details explore the example