Dark Mode on! Learn to integrate Awareness Kit (Dark Mode) in a Travel Application in React Native

Introduction

In this article, I will be integrating Huawei Awareness Kit in a travelling application. React Native Awareness Plugin enables communication between the HMS Core Awareness SDK and React Native platform. React Native helps you to create real and exciting mobile apps with the help of JavaScript only, which is supportable for both android and iOS platforms.
Just code once, and the React Native apps are available for both iOS and Android platforms which helps to save development time.
React Native is a framework that builds a hierarchy of UI components to build the JavaScript code. It uses the same fundamental UI building blocks as regular iOS and Android apps.

Requirements

1. Any operating system (MacOS, Linux and Windows).
2. Must have a Huawei phone with HMS 4.0.2.300 or later.
3. Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4. Minimum API Level 21 is required.
5. Required EMUI 9.0.0 and later version devices.

Integrate HMS Dependencies

• First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a Huawei ID.

• Create a project in android studio, refer Creating an Android Studio Project.

• Generate a SHA-256 certificate fingerprint.

• To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code.
  Or use cmd as explained in SHA256 CODE

• Create an App in AppGallery Connect.

• Download the agconnect-services.json file from App information, copy and paste in android Project under app directory, as follows.
  

• Enter SHA-256 certificate fingerprint and click Save, as follows.

React Native Project Preparation

• Environment set up, refer below link.
  https://reactnative.dev/docs/environment-setup

• Create project using below command.
  react-native init project name

• Open the build.gradle file in the android/app directory of your React Native project and add apply plugin:"com.huawei.agconnect" to the top of the file as shown below.

apply plugin: "com.android.application"
apply plugin: "com.huawei.agconnect"

• Download plugin using the command below:
  npm i @hmscore/react-native-hms-awareness

• Add the following line to dependencies in android/app/build.gradle:
  implementation project(':react-native-hms-awareness')

• Add the following lines to the android/settings.gradle file in your project:
  include ':react-native-hms-awareness'
  project(':react-native-hms-awareness').projectDir = new File(rootProject.projectDir, '../node_modules/@hmsc

Development

Capture API

The Capture API allows your app to request the current user status, such as time, location, behavior, and whether a headset is connected. It also helps to:
Indicate whether the device has approached, connected to, or disconnected from a registered beacon.
Obtains the illuminance of the environment in lux unit where the device is located.

Barrier API

The Barrier API allows your app to set a combination of contextual conditions. When the preset contextual conditions are met, your app will receive a notification.

• Dark Mode Awareness

• Call the dark mode query capability API through the object to obtain the user's context.
• Enable your app to process services based on the result returned by Awareness Kit.

import {HMSAwarenessCaptureModule} from '@hmscore/react-native-hms-awareness'

// Call the getDarkModeStatus API.
HMSAwarenessCaptureModule.getDarkModeStatus()
    .then((darkModeStatusResponse) => console.log("getDarkModeStatus:", JSON.stringify(darkModeStatusResponse))
    .catch((errorObject) => console.log("getDarkModeStatus:", JSON.stringify(errorObject))

A Trigger event can be set according to the response.

• Weather Awareness

Add Following code in Android.Manifest

<!-- Location permission, which is sensitive. After the permission is declared, you need to dynamically apply for it in the code. -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Add the following code in your project:

// Call the getWeatherByDevice API.
HMSAwarenessCaptureModule.getWeatherByDevice()
    .then((weatherStatusResponse) => console.log("getWeatherByDevice:", JSON.stringify(weatherStatusResponse))
    .catch((errorObject) => console.log("getWeatherByDevice:", JSON.stringify(errorObject))

Based on the response from queries we can trigger events.

UI can be customized according to needs.

Travel.js (Dark Mode ON)

<View style={styles.container}>
            <StatusBar backgroundColor='darkgray' />
            <ImageBackground 
                source={backgroundImage}
                style={styles.backgroundImg}
                resizeMode='cover'
            >
                <SearchBar fetchWeatherData={fetchWeatherData} />



                <View style={styles.extraInfo}>

                    <View style={styles.info}>
                        <Text style={{ fontSize: 22, color: 'white' }}>Humidity</Text>
                        <Text style={{ fontSize: 22, color: 'white' }}>{humidity} %</Text>
                    </View>
                    <View style={styles.info}>
                        <Text style={{ fontSize: 22, color: 'white' }}>Temperature {temp} °C</Text>
                        <Text style={{ ...styles.headerText, color: 'white', fontWeight: 'bold'}}>{main}</Text>
                    </View>
                </View>

                <View style={{alignItems: 'center' }}>
                    <Text style={{ ...styles.headerText, backgroundColor: 'rgba(0,0,0,0.5)', color:'white', fontWeight: 'bold', fontSize: 46 }}>{name}</Text>   
                </View>

                <View style={styles.extraInfo}>
                <View style={styles.info}>
                        <Text style={{ fontSize: 22, color: 'white' }}>Wind Speed</Text>
                        <Text style={{ fontSize: 22, color: 'white' }}>{speed} m/s</Text>
                    </View>
                    <View style={styles.info}>
                        <Text style={{ fontSize: 22, color: 'white' }}>Best time to visit {name} :</Text>
                        <Text style={{ fontSize: 22, color: 'white' }}>{month} </Text>
                    </View>
                </View>


const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
    },
    backgroundImg: {
        flex: 1,
        width: Dimensions.get('screen').width
    },
    headerText: {
        fontSize: 36,
        marginTop: 10,
    },
    extraInfo: {
        flexDirection: 'row',
        flexWrap:'wrap',
        marginTop: 20,
        justifyContent: 'space-around',
        padding: 10
    },
    info:{
        width: Dimensions.get('screen').width/2.5,
        backgroundColor: 'rgba(0,0,0,0.5)',
        padding: 10,
        borderRadius: 15,
        justifyContent: 'center'
    },
    info1:{
        width: Dimensions.get('screen').width/2.5,
        backgroundColor: 'rgba(0,0,0,0.5)',
        padding: 10,
        borderRadius: 15,
        justifyContent: 'center'
    }

Testing

Run the android App using the below command.
react-native run-android

Result

Tips and Tricks

1. Set minSdkVersion to 19 or higher.
2. Add API key in project.
3. For project cleaning, navigate to android directory and run the below command. gradlew clean

Conclusion

In this article, we have learnt that how to integrate Awareness Kit into the app using React Native. React Native Awareness Plugin enables communication between the HMS Core Awareness SDK and React Native platform. Capture API allows app to request the current user status, such as time, location, behavior, and whether a headset is connected.

Reference

Awareness Kit: Documentation
Awareness Kit: Training Video