React-native-navigation: mergeOptions does not update title component in Android

[tautvilas]

Issue Description

If I set custom title component in android and later try to change it to another component with mergeOptions that does not work. On IOS it works fine.

Code example

// Screen methods
componentDidMount() {
    Navigation.mergeOptions(this.props.componentId, {
      topBar: {
        title: {
          component: {
            name: 'component.Comp1',
          }
        }
      }
    });
  }

onInteractiveAction() {
    Navigation.mergeOptions(this.props.componentId, {
      topBar: {
        title: {
          component: {
            name: 'component.Comp2',
          }
        }
      }
    });
  }

If onInteractiveAction is triggered by some touch action in screen Comp2 will become visible in IOS navbar but not in Android

---

Environment

• React Native Navigation version: 3.0.0-alpha.7
• React Native version: 0.60.4
• Platform(s) (iOS, Android, or both?): Android
  

  * Device info: Pixel 2 android

Thanks for developing this amazing project :) RNN is the number one navigation solution for react native apps!

[tautvilas]

I have identified the root cause of the problem. This if condition always evaluates to true:

https://github.com/wix/react-native-navigation/blob/master/lib/android/app/src/main/java/com/reactnativenavigation/presentation/StackPresenter.java#L418

The View component does not change even if the options arrive with new RN component. That means the top bar component is never updated. The same problem should also happen for backgroundComponent

If you want I can do a PR for the fix, but need guidance how to solve it. In my case it would be best to remove this check completely because I don't want some hidden caching of RN components when I explicitly specify that I want to change top bar component with mergeOptions.

@guyca

[guyca]

@tautvilas Any chance you could PR a failing Detox test? I'll pick it up from there

[tautvilas]

I will try

[tautvilas]

Hey, was this resolved?

[gp3gp3gp3]

Any update on this? This is still an issue as of version 3.2.0

[tautvilas]

This is a patch for StackPresenter.java that fixes the problem

418,420c418,420
<             if (titleControllers.containsKey(component)) {
<                 topBar.setTitleComponent(titleControllers.get(component).getView());
<             } else {
---
>             //if (titleControllers.containsKey(component)) {
>             //    topBar.setTitleComponent(titleControllers.get(component).getView());
>             //} else {
426c426
<             }
---
>             //}

[vodanh109]

Hi, any update for this issue?

[juddey]

@vodanh109 Well, the patch still works :wink:

[guyca]

Hey guys, the fix is available in 6.4.0, sorry for taking so long to address this.

I understand this was mostly used to replace a component with the same component, only with different props. If all you need is to update props then you should be using Navigation.updateProps. This way the component isn't recreated and the existing component's props are updated.