Getting Started with React Native

Preparing a Development Environment

• Prepare a React Native development environment and create a project.
• Prepare an Android development environment.
• Prepare an iOS development environment.

Creating Your Project and App

1. A project is a container of your apps in AppGallery Connect. You can add different platform versions of an app to the same project. If you do not have any projects yet, create one to get started.
2. If you have not added any apps to your project, add a new one or an existing one to your project first.

Setting a Data Processing Location

Some services in AppGallery Connect involve app data processing. Before using these services, you need to set a data processing location.

Integrating the AppGallery Connect React Native Plugin

Currently, only some AppGallery Connect services provide a React Native plugin. You need to integrate a React Native plugin to your development environment before using any of the following services:

• Auth Service
• Crash
• Remote Configuration
• App Linking
• App Messaging

Adding the Configuration File

To free you from complex configurations, AppGallery Connect provides a configuration file storing your app configurations. You simply need to add the configuration file to your project and integrate the AppGallery Connect plugin. The AppGallery Connect plugin will automatically load the app information configured in AppGallery Connect to your development environment.

1. Sign in to AppGallery Connect and click Development and services.
2. Select your desired project and app.

   

3. Go to Project settings > General information > App information, and download the configuration file.
   • Configuration file for Android: agconnect-services.json
   • Configuration file for iOS: agconnect-services.plist
   NOTE

   By default, the configuration file contains the client secret and API key generated by AppGallery Connect for your app. If you have upgraded to the pay-as-you-go plan, to guard against bills generated through identity spoofing, you are advised to save your own client secret and API key on your server. Before obtaining app configurations, you can select Do not include key, so that your client secret and API key will not be included in the configuration file. In this case, you need to call the APIs of the AppGallery Connect plugin for manual configuration. If you are developing an Android app, you can refer to Setting Parameters Using the Configuration File (only for Android Apps). If you are developing an iOS app, you can refer to Through Parameters in the Configuration File.

   

4. Add the configuration file to your React Native project.
   • Android: Add the agconnect-services.json file to the android/app directory of the React Native project.
   • iOS: Open the iOS module of the React Native project in Xcode and add the agconnect-services.plist configuration file to the project.

Adding Android Gradle Configurations

Configure the Maven repository address and AppGallery Connect plugin address in the Android module of your React Native project.

1. Configure the Maven repository address and AppGallery Connect plugin address.
   1. Open the build.gradle file in the android directory of the React Native project.
   2. Go to allprojects > repositories and configure the Maven repository address.
      Collapse

      Word wrap

      Dark theme

      Copy code

      allprojects { 
                  repositories { 
                      google() 
                      jcenter() 
                      // Add the following line:
                      maven {url 'https://developer.huawei.com/repo/'} 
                  } 
              }

   3. Go to buildscript > repositories and configure the Maven repository address.
      Collapse

      Word wrap

      Dark theme

      Copy code

      buildscript { 
                  repositories { 
                      google() 
                      jcenter() 
                      // Add the following line:
                      maven {url 'https://developer.huawei.com/repo/'} 
                  } 
       }

   4. Go to buildscript > dependencies and configure the AppGallery Connect plugin address. The following version number is only an example.
      Collapse

      Word wrap

      Dark theme

      Copy code

      buildscript { 
                  dependencies { 
                   // Add the following line:
                   classpath 'com.huawei.agconnect:agcp:1.9.6.300'
                  } 
      }

2. Add the AppGallery Connect plugin address.
   1. Open the build.gradle file in the android/app directory of the React Native project.
   2. Add the following information under apply plugin: 'com.android.application':
      Collapse

      Word wrap

      Dark theme

      Copy code

      apply plugin: 'com.huawei.agconnect'

Installing the Plugin

1. In the project directory, run the specific command to install the plugin of the required service. The following takes Crash as an example:
   Collapse

   Word wrap

   Dark theme

   Copy code

   npm install @react-native-agconnect/crash@1.3.0

   Expand

   Service	Configuration
   Remote Configuration	npm install @react-native-agconnect/remoteconfig@1.3.0
   Crash	npm install @react-native-agconnect/crash@1.3.0
   Auth Service	npm install @react-native-agconnect/auth@1.3.0
   App Linking	npm install @react-native-agconnect/applinking@1.3.0
   App Messaging	npm install @react-native-agconnect/appmessaging@1.3.0

   NOTE

   The preceding version numbers are only examples. If the version number is not specified, the latest version is used. If you want to install a specified version, add @x.x.x following the service name.

2. (Optional) React Native 0.60 and later versions support autolinking. For earlier versions, run the required command to perform manual linking. The following uses the Crash service as an example:
   Collapse

   Word wrap

   Dark theme

   Copy code

   react-native link @react-native-agconnect/crash

3. As iOS uses CocoaPods to manage project dependencies, go to the ios directory and run the following command:
   Collapse

   Word wrap

   Dark theme

   Copy code

   pod install

4. Initialize the AppGallery Connect SDK for iOS.

   Import the header file AGConnectCore/AGConnectCore.h to the AppDelegate.m file of the project, and add the following code to the application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method:

   Objective-C:

   Collapse

   Word wrap

   Dark theme

   Copy code

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions {
       // Override point for customization after Application launch.
       [AGCInstance startUp];  // Initialization.
       return YES;
   }

Now, you can use required AppGallery Connect services in React Native.

Setting Parameters Using the Configuration File (only for Android Apps)

The AppGallery Connect SDK provides the @react-native-agconnect/core plugin to configure parameters in the agconnect-services.json file. If you have selected Do not include key when downloading the configuration file, the client_id, client_secret, and api_key parameters are not included in the agconnect-services.json file. You must set the required parameters in the AppGallery Connect SDK through the @react-native-agconnect/core plugin.

1. Run the following command to install the @react-native-agconnect/core plugin:
   Collapse

   Word wrap

   Dark theme

   Copy code

   npm install @react-native-agconnect/core@1.3.0

2. Set the client_id, client_secret, and api_key parameters.
   NOTE

   You are advised to call the plugin in the App.js method.

   Collapse

   Word wrap

   Dark theme

   Copy code

   AGCApp.getInstance().setClientId('clientId');
   AGCApp.getInstance().setClientSecret('clientSecret');
   AGCApp.getInstance().setApiKey('apiKey');

   Go to Project settings > General information, and query the parameter values. Replace clientId with the value of Client ID, clientSecret with the value of Client secret, and apikey with the value of API key. Click next to each parameter to copy the value.

   

Developing the App

This section does not describe app function development in detail. You need to complete the development by yourself.