React Native's journey to fill the hole-turn on TurboModule (Android)

FB has promoted the new architecture for many years, and it is estimated that many people are familiar with it. The main improvement is to switch from all communication via asynchronous Bridge to direct communication. Reduce message communication delay and improve performance. The most critical of these is TurboModule .

Turn on TurboModule

Open TurboModule no documents. There are only a few words in the original native module. An example brings the development students to the react-native code. This shows that the government has long supported this mechanism, but there is no official announcement. But the complexity is too high, and you still need to understand the repo code structure of react-native. There is a better example react-native-animated .

The project is moderate in size and the structure is not that complicated. It is suitable for analogy research and realization.

Implement NativeModule

As before, inherit ReactContextBaseJavaModule . For details, please refer to here . implements getName method .

Add ReactModule annotation

This is a bit different from the previous method.

Now the code looks like this:

@ReactModule(name = ReanimatedModule.NAME)
public class ReanimatedModule extends ReactContextBaseJavaModule {

  public static final String NAME = "ReanimatedModule";

  public ReanimatedModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return NAME;
  }
}

Finally add ReactMethod

  @ReactMethod
  public void animateNextTransition(int tag, ReadableMap config) {
    mTransitionManager.animateNextTransition(tag, config);
  }

That's it for the native module. Let's see how to register this native module.

Register native modules

This part is the focus. In the previous section, the only difference from the previous development of the native module is the addition of an annotation of @ReactModule There are a lot of differences in this part. According to the official website, it is a few steps more than before.

1. Add a class TurboReactPackage

public class ReanimatedPackage extends TurboReactPackage {}

2. Implement the getModule method

  @Override
  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
    if (name.equals(ReanimatedModule.NAME)) {
      return new ReanimatedModule(reactContext);
    }

    return null;
  }

3. Implement getReactModuleInfoProvider

  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
    Class<? extends NativeModule>[] moduleList =
        new Class[] {
          ReanimatedModule.class, ReanimatedUIManager.class,
        };

    final Map<String, ReactModuleInfo> reactModuleInfoMap = new HashMap<>();
    for (Class<? extends NativeModule> moduleClass : moduleList) {
      ReactModule reactModule = moduleClass.getAnnotation(ReactModule.class);

      reactModuleInfoMap.put(
          reactModule.name(),
          new ReactModuleInfo(        // *
              reactModule.name(),
              moduleClass.getName(),
              true,
              reactModule.needsEagerInit(),
              reactModule.hasConstants(),
              reactModule.isCxxModule(),
              TurboModule.class.isAssignableFrom(moduleClass)));
    }

    return new ReactModuleInfoProvider() {
      @Override
      public Map<String, ReactModuleInfo> getReactModuleInfos() {
        return reactModuleInfoMap;
      }
    };
  }

Here, the name of Module still plays an important role. It is the module name how to find that module among the multiple native modules registered in the native. So when initializing ReactModuleInfo , the first parameter is the module name.

The third parameter canOverrideExistingModule false when you still have TurboModules.

needEgerInit If you need to load this module lazily, set it to false . Unless you want your app to also initialize your module when it is initialized. This will increase the boot time.

hasConstant If your module has constant export, set it to true .

isCxxModule is true if the codes are all C codes.

isTurboModule If the current module is a turbo module, set it to true . Not false . This parameter is here because ReactModuleInfo is not only for turbo module.

4. Register Package in Application

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          // ...
          new ReanimatedPackage(), //*
          // ...
      );
    }
}

Register the ReanimatedPackage() object in the method getPackages()

Summarize

FB's optimization of the React Native architecture is mainly focused on optimizing performance. In the specific development activities, the main thing is to use the turbo module to use the optimization of the new architecture. Speed up the boot speed, make the animation smoother, and make the long list scroll more smoothly.