fix(Android,Fabric): prevent header subview disappearance when using setOptions

[kkafar]

Description

• Should be merged after fix(Android,Fabric): prevent Yoga from stretch-fitting height of header subview #2811 & rebased.

When setting subviews via setOptions from useEffect hook in a
component, the first frame received might be computed by native
layout & completely invalid (zero height). RN layout is the source of a
subview size (not origin). When we send such update with zero height
Yoga might (or might not, depending on exact update timing in relation
to other ongoing commits / layouts) set the subview height to 0!
This causes the subview to become invisible & we want to avoid that.

This had not been a problem before #2696, because we would filter out
this kind of frame in the setSize guard in the
ComponentDescriptor.adopt method of the HeaderSubview. #2696 allowed
for zero-sized frames for other, unrelated reason & we must allow these
as long as they come from React Native layout & not native one.

Changes

We now filter these invalid frames on the side of HostTree, by detecting whether React has measured the subview or not.

Test code and steps to reproduce

I've tested the problem on slightly modified Test2466:

Code snippet

        import { NavigationContainer } from '@react-navigation/native';
        import { createNativeStackNavigator, NativeStackNavigationProp } from '@react-navigation/native-stack';
        import React from 'react';
        import { findNodeHandle, Text, View } from 'react-native';
        import PressableWithFeedback from '../shared/PressableWithFeedback';

        type StackParamList = {
          Home: undefined,
        }

        type RouteProps = {
          navigation: NativeStackNavigationProp<StackParamList>;
        }

        const Stack = createNativeStackNavigator<StackParamList>();

        function HeaderTitle(): React.JSX.Element {
          return (
            <PressableWithFeedback
              onLayout={event => {
                const { x, y, width, height } = event.nativeEvent.layout;
                console.log('Title onLayout', { x, y, width, height });
              }}
              onPressIn={() => {
                console.log('Pressable onPressIn');
              }}
              onPress={() => console.log('Pressable onPress')}
              onPressOut={() => console.log('Pressable onPressOut')}
              onResponderMove={() => console.log('Pressable onResponderMove')}
              ref={node => {
                console.log(findNodeHandle(node));
                node?.measure((x, y, width, height, pageX, pageY) => {
                  console.log('header component measure', { x, y, width, height, pageX, pageY });
                });
              }}
            >
              <View style={{ height: 40, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ alignItems: 'center' }}>Regular Pressable</Text>
              </View>
            </PressableWithFeedback>
          );
        }

        function HeaderLeft(): React.JSX.Element {
          return (
            <HeaderTitle />
          );
        }

        function Home({ navigation }: RouteProps): React.JSX.Element {
          React.useEffect(() => {
            console.log('calling setOptions in useEffect');
            navigation.setOptions({
              //headerTitle: HeaderTitle,
              headerLeft: HeaderLeft,
              //headerRight: HeaderLeft,
            });
          }, [navigation]);
          return (
            <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, .8)' }}
            >
              <View style={{ flex: 1, alignItems: 'center', marginTop: 48 }}>
                <PressableWithFeedback
                  onPressIn={() => console.log('Pressable onPressIn')}
                  onPress={() => console.log('Pressable onPress')}
                  onPressOut={() => console.log('Pressable onPressOut')}
                >
                  <View style={{ height: 40, width: 200, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={{ alignItems: 'center' }}>Regular Pressable</Text>
                  </View>
                </PressableWithFeedback>
              </View>
            </View>
          );
        }

        function App(): React.JSX.Element {
          return (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={Home}
                  options={{
                    //headerTitle: HeaderTitle,
                    //headerLeft: HeaderLeft,
                    //headerRight: HeaderLeft,
                  }}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        }

        export default App;

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes (7d3205e)

[kkafar]

@sbeigel I think this should be the final PR to solve these problems

[sbeigel]

@sbeigel I think this should be the final PR to solve these problems

Yes, it works! Thank you!

I initially commented that the header size was wrong but I only applied your latest change and reverted the previous ones (RNSScreenStackHeaderConfigComponentDescriptor.h and RNSScreenStackHeaderSubviewComponentDescriptor.h). I deleted these comments.

I have now applied all three changes against RNS 4.9.2 and it really seems to work. I've only tested on the emulator in dev mode though. We will check the release build on real devices!

Thank you again!

[kkafar]

Thanks! Let me know in case you find any issues. I'm about to release stable 4.10.0 & this was the last blocker.

[kligarski]

👍