Write a Native Module

Like Facebook React Native, You.i Engine One lets you extend the functionality of your React Native application with native code.

Let’s try that out with a simple native module that updates text to reflect the platform it’s running on.

Create a Native Module

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

    Note: Native module class definitions use the macro YI_RN_MODULE. Class methods declared in the header also use various YI_RN_EXPORT* macros. Together, these macros instruct You.i Engine One to make the class and related methods accessible from JavaScript.

    #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_
    
  2. Next, create MyApp/youi/src/PlatformNameModule.cpp as follows.

    Note: The class implementation also uses some YI_RN* macros. The first (YI_RN_INSTANTIATE_MODULE) is mandatory and must always be present in any native module you write.

    #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 folly::dynamic(bridge ? bridge->GetDeviceOSName() :  CYIString::EMPTY_STRING);
    }
    
  3. Have a quick read through the code you just copied and pasted to see if 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 Engine One C++ device bridge.

  4. To include your new native module in your application, regenerate and build it.

    • ./generate.rb -p osx
      ./build.rb -b build/osx
      
    • ./generate.rb -p linux
      ./build.rb -b build/linux/Debug
      
    • ./generate.rb -p uwp   
      ./build.rb -b build/uwp
      

    If you run your application now, you’ll see that there’s no change yet. You need to call the native module via JavaScript.

Add the Native Module to JavaScript

  1. Add the last import line below to bring all native modules (including the one we just created) into your JavaScript application.
    import React, { Component } from "react";
    import { AppRegistry, Image, StyleSheet, Text, View } from "@youi/react-native-youi";
    import { Button } from './button.js';
    import { lightStyles, darkStyles } from './styles.js';
    import { NativeModules } from 'react-native';
    ...
    
  2. In render(), load your native module from NativeModules.
    ...
    render() {
    
      const PlatformName = NativeModules.PlatformNameModule;
    ...
    
  3. Update your app’s text to make use of the platform name returned by your native module.
    <Text style={styles.body}>
    </Text>
      <Text style={[styles.headlineText, themeStyles.headlineText]}>
        Welcome to your first {PlatformName.name} You.i React Native app!
      </Text>
    ...
    

    Run your app again to see a string that matches the OS of your development platform.

    Native modules can do more than expose a constant to JavaScript! And if you write a native module, there’s a good chance it will be more complex than the example above. Your native module can expose methods, take a callback, and even trigger an event. For more information, see the full Native Module documentation.

Congratulations! You now have the basics of writing a You.i RN application.

So far, we’ve seen your You.i RN app work on just one platform - your development platform. The best part about You.i Engine One is that you can code it once and deploy to multiple platforms.

Follow along with the next step in this tutorial as we try your app on an Android device.