RNN 8.4.1 Navigation.mergeOption stops working after a few times topBar->title->component

[aspidvip]

What happened?

RNN 8.4.1 Navigation.mergeOption stops working after a few times it stops working, after the title is white and the component is not shown. Only visible on iOS 26

` Navigation.mergeOptions(this.props.componentId, {
topBar: {
drawBehind: true,

    title: {
      component: {
        id: LOCATION_BUTTON,
        name: LOCATION_BUTTON,
        alignment:
          (Platform.OS === 'ios' &&
            Number(Platform.constants.osVersion).toFixed(0) > 18) ||
          Platform.OS === 'android'
            ? 'center'
            : 'fill',
        passProps: {
          location: text,
          results: defaultTitle,
          onPress: this.debounceHandleSearchLocationPress,
        },
      },
    },
  },
  bottomTabs: {
    drawBehind: Platform.select({ ios: true, android: false }),
  },
});`

What was the expected behaviour?

Should work

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

To reproduce this issue, you need to push to the next screen and run the code

`
Navigation.mergeOptions(this.props.componentId, {
topBar: {
drawBehind: true,

    title: {
      component: {
        id: LOCATION_BUTTON,
        name: LOCATION_BUTTON,
        alignment:
          (Platform.OS === 'ios' &&
            Number(Platform.constants.osVersion).toFixed(0) > 18) ||
          Platform.OS === 'android'
            ? 'center'
            : 'fill',

        passProps: {
          location: text,
          results: defaultTitle,
          onPress: this.debounceHandleSearchLocationPress,
        },
      },
    },
  },
  bottomTabs: {
    drawBehind: Platform.select({ ios: true, android: false }),
  },
});

2025-10-30.14.05.44.mov

`

In what environment did this happen?

React Native Navigation version: 8.4.1
React Native version: 0.77.3
Has Fabric (React Native's new rendering system) enabled: (yes/no) yes
Node version: v23.7.0
Device model: iOS
iOS version: 26

[gosha212]

@markdevocht Please take a look. It happens with fixed component id

[markdevocht]

@aspidvip I found that when changing the alignment in the mergeOptions to 'center' for iOS also, it seems to render it correctly. I build a small side project to try to reproduce your issue using the above code. I am not sure if I am doing the flow exactly as you are because on the first time doing a. mergeOptions the title disappeared in my project. So changing the alignment to center for iOS fixed that.

Navigation.mergeOptions(this.props.componentId, { topBar: { drawBehind: true, title: { component: { id: LOCATION_BUTTON, name: LOCATION_BUTTON, alignment: 'center', passProps: { location: text, results: defaultTitle, onPress: this.debounceHandleSearchLocationPress, }, }, }, }, bottomTabs: { drawBehind: Platform.select({ ios: true, android: false }), }, });

I also uploaded the test app itself.

Screen.Recording.2025-11-05.at.15.08.53.mov

RNNTestApp.zip

@gosha212 The same problem is reproduced when using incremental component id's

[aspidvip]

I looked at your project, everything works. Thank you, I will look deeper into what the problem is.