React Native | Integrating Your Applications With AppGallery Connect
Hello everyone. In this article we are going to take a look at how to integrate react native application with AppGallery Connect. AppGallery Connect provides you with various development services in terms of building, quality, growth, and HUAWEI CLOUD. The development process of an AppGallery Connect service is as follows:
- Create an AppGallery Connect project.
- Add an app to the project.
- Set the data storage location.
- Integrating App Gallery Connect to React Native Application
- Installing an AppGallery Connect Plug-in
Before we begin, you need to have Huawei developer account to use AppGallery Connect. You can sign in/register to Huawei developer website from here.
Create An AppGallery Connect Project
- Sign-in to AppGallery Connect and clicl My projects
2. Click Add project.
3. Enter a project name and click OK.
4. After the project is created, the Project settings page is displayed.
Add an App to the project.
ANDROID
- Click Add app button in Project Settings > General Information page.
If an app already exists in the project, and you need to add a new one, expand the app selection area on the top of the page and click Add app.
2. Enter Application information.
- Select android as platform.
- Select the device on which the released app will be running.
- Enter application name.
- Enter your applications package name.
- Select application category.
- Select default language.
- Click OK.
IOS
- Click Add app button in Project Settings > General Information page.
If an app already exists in the project, and you need to add a new one, expand the app selection area on the top of the page and click Add app.
2. Enter Application information.
- Select IOS as platform.
- Enter Bundle Identifier as App Package ID.
- Enter application name.
- Click OK.
Set Data Storage Location
- Go to Project settings > General information, click Set next to Default data processing location under Project information.
2. Select a data processing location in the displayed dialog box.
3. Click OK.
Integrating App Gallery Connect to React Native Application
- While your android application selected. Go to Project settings > General information > App information, and download agconnect-services.json file from AppGallery Connect website.
2. Add the agconnect-services.json file to the android/app directory of the React Native project.
3. Open the build.gradle file in the android directory of the React Native project.
- Go to allprojects > repositories and configure the Maven repository address for the AppGallery Connect SDK.
- Go to buildscript > repositories and configure the Maven repository address for the AppGallery Connect SDK.
- Go to buildscript >dependencies and configure the AppGallery Connect plug-in address.
4. Open the build.gradle file in the android/app directory of the React Native project.
- Add the following information under apply plugin: ‘com.android.application’ in the file.
IOS
- While your IOS application selected. Go to Project settings > General information > App information, and download agconnect-services.plist file from AppGallery Connect website.
2. Open the iOS module of the React Native project in Xcode and add the agconnect-services.plist configuration file to the project.
- Check “Copy items if needed” and Add your applications target.
Installing an AppGallery Connect Plug-in
For this we will install AGC Auth service plugin as an example.
- In the project directory run:
2. React Native 0.60 and later versions support autolinking, you can skip this step. For earlier versions, run the required command to perform manual linking.
3. As iOS uses CocoaPods to manage project dependencies, go to the ios directory and run the following command:
4. If this is the first AGC plugin for your react native application you need to initialize AGC SDK for IOS:
- Import the header file to the AppDelegate.m file of the project
- Add the following code to the application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method:
If you are reading this line and completed the steps above, congratulations you have successfully integrated AppGallery Connect into your React Native project.
