Write a Native Module

Like Facebook React Native, You.i Platform lets you extend the functionality of your React Native application, beyond our supported components and APIs, with native code. Let’s try that out by building a simple native module that updates text to reflect the underlying platform on which it’s running.

Write Some C++ Code

Create a C++ Header File

Create a new file, PlatformNameModule.h, in MyApp/youi/src with the following contents.

#ifndef _PLATFORM_NAME_MODULE_H_
#define _PLATFORM_NAME_MODULE_H_
#include <youireact/NativeModule.h>

class YI_RN_MODULE(PlatformNameModule)
    {
        public:
            YI_RN_EXPORT_NAME(PlatformNameModule);

            YI_RN_EXPORT_CONSTANT(name);
    };

#endif // _PLATFORM_NAME_MODULE_H_

Create a C++ Class

Create MyApp/youi/src/PlatformNameModule.cpp as follows.

#include "PlatformNameModule.h"
#include <platform/YiDeviceBridgeLocator.h>
#include <platform/YiDeviceInformationBridge.h>
#include <youireact/NativeModuleRegistry.h>

YI_RN_INSTANTIATE_MODULE(PlatformNameModule);
YI_RN_REGISTER_MODULE(PlatformNameModule);

YI_RN_DEFINE_EXPORT_CONSTANT(PlatformNameModule, name)
{
    auto bridge = CYIDeviceBridgeLocator::GetDeviceInformationBridge();
    return ToDynamic(bridge ? bridge->GetDeviceOSName() :  CYIString::EmptyString());
}

Have a quick read through the code you just copied and pasted to see whether you can follow what it’s doing. Our new class, PlatformNameModule, has a single exposed constant, name, whose value is the DeviceOSName string returned by the You.i Platform C++ device bridge.

Update the CMake Build File

To include the native module in your application, you need to tell the compiler about your new class files. Edit youi/SourceList.cmake to add the .cpp and .h files to the YI_PROJECT_SOURCE and YI_PROJECT_HEADERS sections, respectively.

set (YI_PROJECT_SOURCE
    src/App.cpp
    src/AppFactory.cpp
    src/PlatformNameModule.cpp
)

set (YI_PROJECT_HEADERS
    src/App.h
    src/PlatformNameModule.h
)

Rebuild the App

The youi-tv build command calls generate for you the first time you run it. But if you make C++ changes to your application, such as adding a native module, call youi-tv generate explicitly to make sure the changes are picked up.

Generate, then build your app.

youi-tv generate -p osx
youi-tv build -p osx

youi-tv generate -p linux
youi-tv build -p linux

youi-tv generate -p uwp
youi-tv build -p uwp

If you run your application now, you’ll see that there’s no change yet. That’s because we haven’t wired up your new native module code via JavaScript.

Add the Native Module to JavaScript

Add the import line below to index.youi.js to bring all native modules (including the one we just created) into your JavaScript application.

import { NativeModules } from 'react-native';

In render(), load your native module from NativeModules.

  ...

  render() {

    const PlatformName = NativeModules.PlatformNameModule;
    ...

Update your app’s text to make use of the platform name returned by your native module.

          <Text
            style={[styles.headlineText, themeStyles.headlineText]}
            accessibilityLabel="Welcome to your first {PlatformName.name} You I React Native app"
          >
            Welcome to your first {PlatformName.name} You.i React Native app!
          </Text>
...

Run the App

When you build and run your app again, you’ll see a string that matches the OS of your development platform.

youi-tv run -p osx

youi-tv run -p linux

youi-tv run -p win64

Explore the Possibilities

Native modules can do more than expose a constant to JavaScript! When you write a native module for your app, there’s a good chance it will be more complex than the example above. But now you know it’s possible, and that it’s commonplace in React Native.

Your native module can expose methods, receive a callback, fulfill a promise, and trigger an event. And of course, you can optionally register .cpp and .h files based on the target platform, giving you the power to expose platform-specific features to your app. For more information, see the full Native Module documentation.

If You Had Issues

If you had any issues with this tutorial, you can download a zip file with the completed JavaScript and C++ files. The files contain updates for the entire tutorial and won’t run for all the steps, but they’re useful guides for adding lines of code.