[Android] Redundant onLayout event

[hayeah]

Sample App: https://rnplay.org/apps/L_-nNQ

I am using a RootView component to detect device rotation, but when animating an absolutely positioned child View in the class hierarchy, the RootView is getting redundant layout events.

<RootView onLayout={onDeviceRotation}>
   <Animated.View>
   </Animated.View>
</RootView>

On Android, onDeviceRotation gets a layout event for each frame (when the child view changes). On iOS, onDeviceRotation is called only on initial layout.

Digging into the source code, I found that:

• On iOS, if a view is dirtied but if its frame doesn't change, then onLayout doesn't happen.
• On Android, if a view is dirtied but if its frame doesn't change, onLayout DOES happen.

The relevant code is below.

iOS Side

RCTUIManager dispatches onLayout event for views that received new frames.

See: https://github.com/facebook/react-native/blob/02578df4f731b411b7b0be5f5dd83bd7233d2800/React/Modules/RCTUIManager.m#L550-L567

  for (RCTShadowView *shadowView in viewsWithNewFrames) {
    ...
    if (shadowView.onLayout) {
      CGRect frame = shadowView.frame;
      shadowView.onLayout(@{
        @"layout": @{
          @"x": @(frame.origin.x),
          @"y": @(frame.origin.y),
          @"width": @(frame.size.width),
          @"height": @(frame.size.height),
        },
      });
    }

RCTShadowNodes checks if frame changed, it not, don't add the view to viewsWithNewFrames, thus preventing onLayout event to get dispatched.

See: https://github.com/facebook/react-native/blob/02578df4f731b411b7b0be5f5dd83bd7233d2800/React/Views/RCTShadowView.m#L152-L155

if (!CGRectEqualToRect(frame, _frame)) {
  _frame = frame;
  [viewsWithNewFrame addObject:self];
}

Android Side

Android always dispatch an event if the layout is dirtied. In our case, the child view dirties the parent. We can do something similar as iOS, by checking if the frame changed before dispatching an event.

See: https://github.com/facebook/react-native/blob/02578df4f731b411b7b0be5f5dd83bd7233d2800/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIImplementation.java#L729-L744

cssNode.dispatchUpdates(
          absoluteX,
          absoluteY,
          mOperationsQueue,
          mNativeViewHierarchyOptimizer);

      // notify JS about layout event if requested
      if (cssNode.shouldNotifyOnLayout()) {
        eventDispatcher.dispatchEvent(
            OnLayoutEvent.obtain(
                tag,
                cssNode.getScreenX(),
                cssNode.getScreenY(),
                cssNode.getScreenWidth(),
                cssNode.getScreenHeight()));
      }

Specifically, we can change dispatchUpdates to return false if frame didn't change, and avoid dispatching the onLayout event.

---

• Provide a minimal code snippet / rnplay example that reproduces the bug.
• [x Provide screenshots where appropriate
• What's the version of React Native you're using? 0.24.1
• Does this occur on iOS, Android or both? Inconsistency between Android and iOS.
• Are you using Mac, Linux or Windows? Mac

[hayeah]

fix #7250

[mkonicek]

I asked on Twitter and there's a module to detect screen rotation properly, you might want to use that instead:
https://github.com/walmartreact/react-native-orientation-listener

Your PR #7250 might still make sense though (let's wait for others to comment).

[satya164]

@mkonicek It wasn't very usable on Android last time I tried it though - https://github.com/walmartreact/react-native-orientation-listener/issues

[erikatg]

I ran into this as well while evaluating different methods of detecting orientation change. There's various problems (at least for android) with the orientation-plugins out there.

[thoblr]

@mkconicek This issue causes problem on other cases than just orientation changes. For example, I've experience performance issues related to redundant layout events when animating a parent to a view that has on layout. In the app I'm working on I use onLayout to setState and this is causing the Android version to re-render component tree during animation and in turn causing animation to lag considerably.

I've created a small reproducer to show the reduntant layout events when animating here: [https://rnplay.org/apps/DUpmUA]. The result is similar to @hayeah's example, I.E. animation does not trigger any layout event on iOS but on Android it triggers plenty of them.

For me the PR #7250 fixes the issue and makes Android behave like iOS. (Merged it into 0.26-stable)

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/android-redundant-onlayout-event

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.

[hayeah]

I believe this issue is resolved and merged #7250