skip to content
Andrei Calazans

React Native Weekly - W47 2021

/ 4 min read

react-native , react-native-weekly

Welcome to the 35th edition of React Native Weekly!

This is week 47 of 2021: November 15th to 21st.

Add onScroll event to the Fabric TextInput

Phillip Pan phillippan@fb.com added the missing onScroll event to the Fabric TextInput component on iOS.

He first added the missing onScroll event to the TextInputEventEmitter then hooked it up to the RCTTextInputComponentView.mm:

+- (void)scrollViewDidScroll:(UIScrollView *)scrollView
+{
+  if (_eventEmitter) {
+    std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter)->onScroll([self _textInputMetrics]);
+  }
+}
+

Option to support monorepo/custom location of node_modules [Codegen]

Sota Ogo sota@fb.com added an option to set where the codegen config files are location, this is specially important for Monorepos.

+  .option('c', {
+    alias: 'configFileDir',
+    default: '',
+    description:
+      'Path where codegen config files are located (e.g. node_modules dir).',
+  })

Refactor native Android ScrollView animation code into helper

Refactor done by Xin Chen xch@fb.com, he organized and extracted the common logic used by the vertical and horizontal scroll views on Android into a helper - ReactScrollViewHelper.

This reduces code duplication and makes the helper share impact surface.

Add volta support to find-node.sh

This commit adds support for Volta the tooling manager that can enforce that everyone uses the same tooling versions. I honestly didn’t know of this tool.

Remove soft error when creating preallocated view

While this change by Andrei Shikov ashikov@fb.com seems little, he shares some interesting context around it.

This is expected with Suspense/CM enabled. We are measuring the perf impact of extra CREATE instructions atm, and will revert the change if it regresses too much.

Experiment for running JS on view creation

Jimmy Lai feedthejim@fb.com launched an experiment to see if they can start the JavaScript work earlier instead of waiting for the View.onMeasure call on Android.

This change starts the JavaScript work on view creation.

If this goes well it could mean a potential start-up improvement on Android.

Extending Fabric & ViewConfig to support onEnter/onExit/onMove events

This is a series of work done by David Vacca dvacca@fb.com to support these events for React Native VR (Virtual Reality).

While it does not include the implementation of the events yet, maybe to come?, it does the work of:

Note about View Flattening

View Flattening was introduced to improve performance and reduce out-of-memory/stack-overflow errors on Android, with Fabric iOS got it for free since the logic got moved to C++.

It’s good see what disables View flattening, for instance setting collapsable={false} to a component will force it and its children to not be flattened.

You can see the full list of props/settigns that will disable view flattening here

Complete Fabric Native Component Example

Sota Ogo sota@fb.com added a Fabric Component example that takes a native View component and extends it to add a callNativeMethodToChangeBackgroundColor method.

See complete directory here and commit.

By looking at this implementation you will notice a few things:

1) MyNativeViewNativeComponent.js defines the JSI layer

interface NativeCommands {
  +callNativeMethodToChangeBackgroundColor: (
    viewRef: React.ElementRef<MyNativeViewType>,
    color: string,
  ) => void;
}

export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ['callNativeMethodToChangeBackgroundColor'],
});

export default (codegenNativeComponent<NativeProps>(
  'RNTMyNativeView',
): MyNativeViewType);

2) RNTMyNativeViewComponentView.mm implements the native callNativeMethodToChangeBackgroundColor using Fabric

- (void)callNativeMethodToChangeBackgroundColor:(NSString *)colorString
{
  UIColor *color = [self UIColorFromHexString:std::string([colorString UTF8String])];
  _view.backgroundColor = color;
}

The Fabric version of callNativeMethodToChangeBackgroundColor is much simpler because you don’t need to find the View counterpart and also parsing the NSString color is simplified by UIColorFromHexString.

3) RNTMyNativeViewManager.mm implements the native callNativeMethodToChangeBackgroundColor using the bridge

RCT_EXPORT_METHOD(callNativeMethodToChangeBackgroundColor : (nonnull NSNumber *)reactTag color : (NSString *)color)
{
  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
    UIView *view = viewRegistry[reactTag];
    if (!view || ![view isKindOfClass:[UIView class]]) {
      RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
      return;
    }

    unsigned rgbValue = 0;
    NSString *colorString = [NSString stringWithCString:std::string([color UTF8String]).c_str()
                                               encoding:[NSString defaultCStringEncoding]];
    NSScanner *scanner = [NSScanner scannerWithString:colorString];
    [scanner setScanLocation:1]; // bypass '#' character
    [scanner scanHexInt:&rgbValue];

    view.backgroundColor = [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16) / 255.0
                                           green:((rgbValue & 0xFF00) >> 8) / 255.0
                                            blue:(rgbValue & 0xFF) / 255.0
                                           alpha:1.0];
  }];
}

4) The podspec call the codegen generator

# Enable codegen for this library
  use_react_native_codegen!(s, {
    :library_name => "MyNativeViewSpec",
    :react_native_path => "../../../",
    :js_srcs_dir => "./js",
    :library_type => "components"
  })

I think Sota implemented the bridge example alongside to as an example and also to support for the RN-Tester to work if Fabric is disabled.

1200+ React Native Screens

Josh tweeted the Facebook app now has 1200+ screens.

Community

Done

That’s it for this week. If you want to see more checkout the previous week’s posts here. Subscribe to get notified when new posts are out = )Sa