React-native-navigation: mergeOptions does not work for topBar when component is used on ios

[ssorint]

I am trying to render top bar with 3 buttons and when one button is pressed, a textbox should appear in the top bar. This works but when I try to go back to the 3 buttons view, the top bar does not render the title correctly, the component I specified in the last step is still visible.

Steps to Reproduce / Code Snippets / Screenshots

// Initial top bar
var initialListTopBar = {
rightButtons: [
{
id: 'topbuttons.search',
icon: Platform.OS == 'ios' ? require('../src/assets/ios/Search_White.png') : require('../src/assets/android/Search_White.png'),
color: 'white'
},
{
id: 'topbuttons.add',
icon: Platform.OS == 'ios' ? require('../src/assets/ios/Add_White.png') : require('../src/assets/android/Add_White.png'),
color: 'white'
}
],
leftButtons: [
{
id: 'topbuttons.menu',
icon: Platform.OS == 'ios' ? require('../src/assets/ios/Menu_White.png') : require('../src/assets/android/Menu_White.png'),
color: 'white'
}
],
background: {
component: { name: 'navigation.HeaderTopBarBackground' }
},
elevation: 0,
noBorder: true
};

// When I push the search button:
Navigation.mergeOptions('navigation.MainList', {
topBar:
{
title: {
component: {
name: 'navigation.TopBarSearch',
id: 'gigi'
},
},
rightButtons: [
{
id: 'topbuttons.cancelsearch',
text: 'Cancel',
color: 'white'
}
],
leftButtons: []
}
});

// When I push the Cancel button
Navigation.mergeOptions('navigation.MainList', {
topBar:
{
title: {
text: '' // This works on Andoid but not iOS
},
rightButtons: [
{
id: 'topbuttons.search',
icon: Platform.OS == 'ios' ? require('../src/assets/ios/Search_White.png') : require('../src/assets/android/Search_White.png'),
color: 'white'
},
{
id: 'topbuttons.add',
icon: Platform.OS == 'ios' ? require('../src/assets/ios/Add_White.png') : require('../src/assets/android/Add_White.png'),
color: 'white'
}
],
leftButtons: [
{
id: 'topbuttons.menu',
icon: Platform.OS == 'ios' ? require('../src/assets/ios/Menu_White.png') : require('../src/assets/android/Menu_White.png'),
color: 'white'
}
]
}
});

---

Environment

• React Native Navigation version: 2.5.2
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone X 12.1 - Simulator

[retyui]

https://github.com/wix/react-native-navigation/issues/4625

[fantasywind]

4502

[ssorint]

I seems that the background component is never refresh on iOS, even with Navigation.push

Navigation.push(this.props.componentId, { component: { id: 'ViewEventNavigator', name: 'navigation.ViewEvent', passProps: { eventId: eventId }, options: { topBar: { visible: true, drawBehind: false, noBorder: true, elevation: 0, background: { color: 'transparent', component:{ name: 'navigation.Empty' } }, backButton: { visible: true, icon: require('../assets/icons/back_white.png'), color: 'white' }, text: '' } } } });

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[dcalhoun]

I experienced this issue this week. It is still relevant.

Environment:

• [email protected]
• [email protected]
• iOS 12.1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[enisinanaj]

Issue still persists

Environment:

[email protected]
[email protected]
iOS 12.1

[rener172846]

I have same issue, any solution?

[enisinanaj]

My solution for this was to set an ID to the screens that had the issue and then register a registerComponentDidAppearListener event where i'm calling the merge options.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[FRizzonelli]

@enisinanaj I can confirm that calling mergeOptions on didAppear works. Still this is not a suitable solution. I don't want to add a listener in my code to call this on first appear (the components are first screens in a stack for each bottomTab)
Also this #4625 is already accepted but it's a big bug :( Any ETA on the possible fix? @yogevbd

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[dcalhoun]

I believe this is still an active, relevant issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[FRizzonelli]

This shouldn't be closed :( also again linked to #4625 which is open from around 8 months. Any ETA guys? Or at least where we'd check to find a workaround!

[enisinanaj]

This seems to be pretty much fixed in the newer releases. I'm not experiencing the issue anymore since upgrading. try that.