headerRight size and alignment is incorrect when rendered items change

[elrony]

Description

The size and position of the rendered headerRight are incorrect and do not update when the rendered items change.

Steps to reproduce

import {NavigationContainer} from '@react-navigation/native';
import {Pressable, Text, View, StyleSheet, Button} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

const styles = StyleSheet.create({
  button: {
    width: 42,
    height: 42,
    marginHorizontal: 5,
    padding: 5,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  buttonsView: {
    flexDirection: 'row',
    borderWidth: 1,
  },
});

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: true,
        headerBackButtonDisplayMode: 'minimal',
      }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={HomeScreen} />
    </Stack.Navigator>
  );
}

const HomeScreen = ({navigation}: any) => {
  const [secondButtonShown, setSecondButtonShown] = useState(true);
  const [thirdButtonShown, setThirdButtonShown] = useState(true);
  const [showAllButtons, setShowAllButtons] = useState(true);

  const headerRight = useCallback(() => {
    return (
      <>
        <Pressable style={styles.button} onPress={() => console.log(1)}>
          <Text>1</Text>
        </Pressable>
        {secondButtonShown && (
          <Pressable style={styles.button} onPress={() => console.log(2)}>
            <Text>2</Text>
          </Pressable>
        )}
        {thirdButtonShown && (
          <Pressable style={styles.button} onPress={() => console.log(3)}>
            <Text>3</Text>
          </Pressable>
        )}
      </>
    );
  }, [secondButtonShown, thirdButtonShown]);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerStyle: {backgroundColor: 'pink'},
      headerRight: () => (
        <View
          style={[styles.buttonsView, !showAllButtons && {display: 'none'}]}>
          {headerRight()}
          <Pressable style={styles.button} onPress={() => console.log('D')}>
            <Text>[D]</Text>
          </Pressable>
        </View>
      ),
    });
  }, [navigation, headerRight, showAllButtons]);

  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Toggle 2nd button"
        onPress={() => setSecondButtonShown(p => !p)}
      />
      <Button
        title="Toggle 3rd button"
        onPress={() => setThirdButtonShown(p => !p)}
      />
      <Button
        title="Toggle All Right Buttons"
        onPress={() => setShowAllButtons(p => !p)}
      />
    </View>
  );
};

function App() {
  return (
    <GestureHandlerRootView>
      <NavigationContainer>
        <MyStack />
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

export default App;

Snack or a link to a repository

http://example.in.description

Screens version

4.7.0

React Native version

0.77.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[davidjbng]

Here is a repro

https://github.com/davidjbng/screens-header-repro

Steps to reproduce

1. Click on "Update Header"
2. Observe the updated headerRight Text on the top right

Expected

headerRight should be updated to fit the entire text "Longer Screen Title"

Behavior in old Architecture:

Actual

headerRight content is cut off.

Not working in new Architecture:

Architecture

Fabric (New Architecture)

Platforms

iOS and Android

[hirbod]

I run into the very same issue, also had problems when I added items in headerRight without a size, they would just be cut-off. Also, hitSlop is not working when using headerLeft oder headerRight, the "clipped area" does not react on touches

[kkafar]

I confirm the issue & already have a good understanding what is going on. This is most likely a regression introduced in 4.5.0 by #2466. However I don't have good idea yet how to fix it w/o breaking pressables in header.

[kkafar]

I don't see good solution here yet unfortunately. Leaving notes for the future.

Bug mechanism

#2466 introduced shadow state for HeaderSubview component. This is required, because any frame (origin + size) inconsistencies between ShadowTree and HostTree lead to issues with pressables (discussed at length in #2466).

Imagine we have a HeaderSubviewShadowNode with size set (based on state update received from host tree) and now, its contents change. Yoga will trim/fit the contents to match the imposed size of the parent node of HeaderSubview. Therefore nothing in layout of HeaderSubview itself will change and there will be no mutation (update-layout) send to host tree - HeaderSubview in HostTree won't receive any layout update. There is even chance, that it's contents wont' change.

[Tencryn]

Unfortunately, I updated react-native-screens to fix that very issue with pressables and now I'm stuck with this issue.

I hope a solution can be found in due time. Until then, I will have to try rollback as I'd rather rely on TouchableOpacity than to not be able to do anything at all with the headerRight.

Nevermind, rolling back isn't an option due to a lack of compatibility with later RN versions.