[Navigator.NavigationBar] Update to 0.15.0,the previous route navigationBar's button event can be triggered

[everfire130]

if previous page :

current page:

click here ,the previous page button

will be click

[facebook-github-bot]

Hey everfire130, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[ashleydw]

I had the same but fixed it by rendering an empty <View /> in my routeMapper if no button was to be shown

[everfire130]

@ashleydw I know that.But how to do this now?

it will be affected no matter use the left 、right or title
and Android‘s effect is different to iOS’s

[satya164]

Actually it was happening in earlier versions also. Related #3964

[adriansdev]

I have noticed same issue with hidden buttons and NavigatorNavigationBar is creating empty views which block clicks in the nav area. Returning null when no button is required fixed the hidden clicks

[djk4096]

I have found this to be a side effect of a change starting in v0.15.0 to how view hit testing is done when opacity=0, in this commit:

77272d5

I am currently working around this by replacing code in NavigatorNavigationBar.js, adding the following prop setting to the View rendered in _getComponent:

    rendered = (
      <View
        ref={(ref) => {
          this._components[componentName] = this._components[componentName].set(route, ref);
        }}
        pointerEvents={
          route === this.props.navigator.navigationContext.currentRoute ? 'auto' : 'none'
        }
        style={initialStage[componentName]}>
        {content}
      </View>
    );

Also there was just an update to NavigatorNavigationBar.js in master db69004 an hour ago, in this same spot in the code but it does not fix the issue for me. I am using jumpTo to navigate to routes that are all rendered when the App is initialized. I also have custom RightButtons per-route.

[adriansdev]

Ideally the NavBar should hide the button once faded out rather than build up 0 opacity views.

Another solution is amending NavigatorNavigationBarStylesIOS so the RightButton does not change position when transitioning the view to the left.

Stages.Left.RightButton sends the button to a left position at 1/3 Screen Width. By removing the 'Left' style value the button fades out in the right and is not blocking the middle of the nav bar at 0 opacity. I can't see a difference visually

[samuelkraft]

The fix by @djk4096 works for me!

[gre]

@djk4096 I think this was fixed by #4786 which hopefully should come in next react-native release

[satya164]

@gre Thanks. Will test and close.

[gre]

Actually I think i've misread what was the issue about, because there is the idea to check the currentRoute in this workaround, maybe the bug is still there actually.

but in @djk4096 workaround, I think we need to use "box-none" instead of "auto" for the reason explained in #4786

[samuelkraft]

The bug is still there after #4786, but as you say will be fixed by using @djk4096 workaround with "box-none".

pointerEvents={
  route === this.props.navigator.navigationContext.currentRoute ? 'box-none' : 'none'
}