-
-
Notifications
You must be signed in to change notification settings - Fork 5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add withNavigationFocus HOC #3512
Conversation
Codecov Report
@@ Coverage Diff @@
## master #3512 +/- ##
==========================================
- Coverage 72.6% 72.05% -0.55%
==========================================
Files 51 52 +1
Lines 1595 1607 +12
==========================================
Hits 1158 1158
- Misses 437 449 +12
Continue to review full report at Codecov.
|
just added an example to playground app: TabsWithNavigationFocus |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, this is exactly what I had in mind. Thanks for the contribution!!
src/views/withNavigationFocus.js
Outdated
}; | ||
|
||
componentDidMount() { | ||
if (this.props.navigation) { |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
src/views/withNavigationFocus.js
Outdated
), | ||
]; | ||
} else { | ||
console.warn( |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
<Component | ||
{...this.props} | ||
isFocused={this.state.isFocused} | ||
ref={this.props.onRef} |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
I updated the PR to get navigation from both props and context |
Oh yay, flow errors! 😭
Looks like you need to add a definition for this new HOC in |
As for the |
fixed the flow errors on playground, tell me if there's anything else to do |
@slorber - can you open a PR on the website repo with an API reference for this? http://github.com/react-navigation/website |
@slorber - it turns out that this isn't a reliable way to find the navigation focused state. it will only work if it is wrapping a navigation screen. if you add it to some component in the screen, and that component is rendered after the parent screen component is mounted, this will not work until you navigate to and away from the screen where it's rendered. this is because it depends on navigation events, and those are only fired when things change. we need some way to be able to reach in to the parent navigation state and determine if it is focused synchronously on mount, in the state initializer. cc @ericvicenti |
Maybe a |
I understand that problem, do you have any solution to propose? What about a new navigator config @satya164 I wouldn't use such |
Another option is to always call the listener with the current value synchronously as soon as you attach it. |
I like this idea (it's what History.listen does to provide immediate history location), but shouldn't we create a |
I don't like calling |
}; | ||
|
||
state = { | ||
isFocused: false, |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
* add withNavigationFocus HOC See: - react-navigation#51 (comment) - react-navigation#51 (comment) - react-navigation#3345 (comment) * typos * remove unused import * Add withNavigationFocus export * add example TabsWithNavigationFocus * add example TabsWithNavigationFocus * withNavigationFocus: get navigation from context or props * subs => subscriptions * fix flow issues
As discussed in other issues, we should be able to know easily which screen has the focus.
This HOC idea has been mentioned here by @satya164 and @ericvicenti
Here is a basic implementation using the new lifecycle hooks to provide this feature