React Native

React Native

This section explains how to implement NaoSDK in a React project, with Android. Once the Android project is generated, follow the NAO documentation (add dependencies, fill in the manifest, add the MyNaoService class …).
To implement a native module (see official documentation for Android and iOS for more details) in the project, here is an Android example applied to NaoServiceLocation:

Create a NaoModule.java class that implements NAOLocationListener, NAOSensorsListener and inherits from ReactContextBaseJavaModule:

1public class NaoModule extends ReactContextBaseJavaModule implements NAOLocationListener, NAOSensorsListener {
2    private static ReactApplicationContext reactContext;
3    protected NAOSyncListener naoSyncListener;
4    private NAOLocationHandle locationHandle;
5  
6    NaoModule(ReactApplicationContext context) {
7        super(context);
8        reactContext = context;
9    }
10}

Add the name that corresponds to the library that we get called from React (JavaScript): NaoExample

1@Override
2public String getName() {
3    return "NaoExample";
4}

Add the necessary functions that will be raised to React (JavaScript):
These functions must be preceded by @ReactMethod; For example, the function “syncNao” will allow synchronization with the database.

1//NaoModule.java
2@ReactMethod
3public void syncNao(String key) {
4    if (locationHandle == null) {
5        createHandle(key);
6    }
7    locationHandle.synchronizeData(naoSyncListener);
8}

With React: We call from NativesModules: NaoExample.syncNao

1//Main.js
2 
3import { NativeModules } from 'react-native';
4//....
5 
6_sync = ({key}) => {
7    NativeModules.NaoExample.syncNao(key)
8}
9 
10//....

To implement Callback functions or promises, we proceed in the same way, except that we pass our Callback functions to the parameters of the method raised to React, and to call the Callback function, we use the func_callback.invoke(“Message“) method.

1//NaoModule.java
2@ReactMethod
3public void initNAOResources(String key, Callback onSyncSuccess, Callback onSyncFailure) {
4        // synchronize PDB
5        if (key != null & !key.equals("")) {
6            locationHandle = new NAOLocationHandle(getReactApplicationContext(), MyNaoService.class, key, this, this);
7            naoSyncListener = new NAOSyncListener() {
8            @Override
9                public void onSynchronizationSuccess() {
10                Log.d(TAG, "onSynchronizationSuccess");
11                onSyncSuccess.invoke("onSynchronizationSuccess");
12            }
13 
14            @Override
15            public void onSynchronizationFailure(NAOERRORCODE errorCode, String message) {
16                Log.e(TAG, "onSynchronizationFailure: "+ message + "// errorcode : " + errorCode);
17                onSyncFailure.invoke("onSynchronizationFailure: " + message);
18            }
19        };
20    }
21}
1//Main.js
2 
3_sync = () => {
4    NaoExample.initNAOResources(this.props.navigation.state.params.apiKey,
5        (mes) => {
6            console.log("sync")
7            ToastAndroid.show(mes, ToastAndroid.SHORT);
8        },
9        (err) => {
10            console.log("sync err" + err)
11            ToastAndroid.show(err, ToastAndroid.SHORT);
12        }
13    )
14    NaoExample.syncNao(this.props.navigation.state.params.apiKey)
15}

Register the module: You must register the module so that it is valid from JavaScript. Create NaoManager.java:

1//NaoManager.java
2 
3import com.facebook.react.ReactPackage;
4import com.facebook.react.bridge.NativeModule;
5import com.facebook.react.bridge.ReactApplicationContext;
6import com.facebook.react.uimanager.ViewManager;
7 
8import java.util.ArrayList;
9import java.util.Collections;
10import java.util.List;
11 
12public class NaoManager implements ReactPackage {
13 
14    @Override
15    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
16        return Collections.emptyList();
17    }
18 
19    @Override
20    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
21        List<NativeModule> modules = new ArrayList<>();
22 
23        modules.add(new NaoModule(reactContext)); // You must add this line for each module
24        return modules;
25    }
26}

The package must be provided in the “getPackages” method of the MainApplication.java file. This file exists under the android folder in your react-native application directory. The path to this file is: android / app / src / main / java / com / your-application-name / MainApplication.java.

1//MainApplication.java
2@Override
3protected List<ReactPackage> getPackages() {
4    List<ReactPackage> packages = new PackageList(this).getPackages();
5    packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
6    packages.add(new NaoManager());
7    return packages;
8}

    • Related Articles

    • Release 23.12 (NAOSDK 4.11.14)

      Versions Component Version NAO® Cloud 23.12 NAO® Viewer 23.12 NAO® SDK iOS 4.11.14 NAO® SDK Android 4.11.14 NAO® Logger iOS 4.11.14 NAO® Logger Android 4.11.14 New Features NAO® Viewer Improve history management NAO Flow V1 NAO® Cloud / NAO® Server ...

    • Flutter

      NAOSDK Flutter Plugin In the context of helping our customers and partners who want to develop their application with Flutter and use NAOSDK indoor location-based use cases, we have developed a version of a flutter plugin that makes it easy to embed ...

    • iOS 15

      Intro iOS 15 has been released on September 15th (2021). It doesn’t need any additional permissions, the previous recommendations for the iOS 14 remain valid. However, two new features or enhancements about the location permissions and notifications ...

    • Release 24.06 (NAOSDK 4.11.16)

      Versions Component Version NAO® Cloud 24.06 NAO® Viewer 24.06 NAO® SDK iOS 4.11.16 NAO® SDK Android 4.11.16 NAO® Logger iOS 4.11.16 NAO® Logger Android 4.11.16 New Features NAO® SDK New interface available – NAOSDK integrates a new callback, to ...