Comments (8)
Note your implementation using [key] was probably causing troubles because the listener that gets called is the initial arrow function, and does not update as component re-render. The closure might catch variables and change behavior other time.
function MyComp(({someBool})) {
useNavigationEvents(evt => {
if ( someBool ) {
alert("true");
}
else {
alert("false");
}
});
...
}
If somebool goes from true to false, the behavior of the closure (which has captured the boolean state) change other time. It will keep alerting the initial boolean value, regardless of its current value.
from hooks.
Hey Sébastien, sorry for the delayed response!
I think it would make sense to only subscribe or re-subscribe when the key changes. I had attempted to do this by providing [navigation.state.key]
as the second argument to useEffect, but this caused some pretty bad bugs and I haven't had time to investigate.
Can you help debug and fix this?
from hooks.
Yes sure I can try to make a PR soon. Do you have any idea how I could reproduce your "pretty bad bug" caused by providing navigation key? Just to make sure I clear it
from hooks.
I've tried running your dev web server. For unknown reasons I'm unable to yarn link my local react-navigation-hooks correctly. What's your dev setup for this project?
I'm able to edit my local package from npm which is not ideal.
The problem you met is:
const [events, setEvents] = useState([]);
useNavigationEvents(evt => {
// latest state on evt.state
// prev state on evt.lastState
// triggering navigation action on evt.action
setEvents([...events, evt]);
// evt.type is [will/did][Focus/Blur]
});
On first render, the event list is empty. The closure capture events = [], and only the first render closure is registered to the event system, you basically, you keep adding the last event to an empty list, because the empty list was captured in the initial closure, and the list does not grow
from hooks.
Hi @ericvicenti
I've made a PR which permit to use a stable callback and only update the subscriptions on key change, and yet avoid the problems mentionned above.
https://github.com/react-navigation/react-navigation-hooks/pull/8/files
Note that with previous implementation (with no useEffect inputs) or with my fix, I still have weird bugs where the navigation listener stops firing after a few events. If I switch from docA to docB it works (I get action events), but as soon as I click to the focused doc again, I get "willBlur/didBlur" events, and then, the listener provided to navigation.addListener never fires again.
Any idea what could be happening?
from hooks.
Also want to point out that the closure the user provide may fire multiple times synchronously, so you want to do this:
const [events, setEvents] = useState([]);
useNavigationEvents(evt => {
setEvents(evts => evts.concat(evt));
});
Instead of this:
const [events, setEvents] = useState([]);
useNavigationEvents(evt => {
setEvents([...events,evt]);
});
With the later, of you get willBlur/didBlur firing synchronously, you will get the same closure problem and only capture the last event, because setState is not synchronous
from hooks.
Will be fixed by #38, going to merge/release soon
from hooks.
should be fixed by release 1.0.3 and #38, please tell me if everything works
from hooks.
Related Issues (20)
- Proper way to use react-navigation-hooks with storybook HOT 2
- Types are missing and causing errors HOT 18
- react-navigation-hooks v2 HOT 2
- setTopLevelNavigator support for hooks HOT 2
- Getting error 'from' expected HOT 2
- useFocusEffect should not retrigger on re-render HOT 8
- I can't define NavigationParams types with useNavigation HOT 1
- Reset Stack HOT 1
- Proposal: Ability to pass params for tabBarOnPress defaultHandler function HOT 1
- setParams entity change when is called HOT 1
- useFocusEffect should handle drawers HOT 4
- useNavigation shouldn't be in @react-navigation/native? HOT 3
- Open&Close Drawer HOT 1
- Hooks on the web - react-navigation is now directly imported HOT 3
- useNavigation give the warning "can't perform a React state update on an unmounted component" HOT 1
- Can I reproduce events like "onEnter/onExit" ? HOT 6
- "THIS ISSUE WAS DELETED AND BLOCKED"
- Include v5 patching for users converting from v4 to v5? HOT 1
- useNavigation not working HOT 1
- How i can re-render with useNavigationParam ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hooks.