React Native SDK Setup AppSync

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

Step 1. iOS Requirements and setup

1.1 Requirements​

• iOS deployment target: 12.0

2.2 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>

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

2.2 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>

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

3.1 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)

3.2 Import

App.tsx

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

3.3 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!

3.4 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!),
          },
        ]
      );
    }
  });
}, []);

Step 4. Run your App and Setup your app update and/or its maintenance services

Run your app by using core 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