Comments (7)
Hi,
I understand what you want and somehow agree that you generally want to handle events inside or outside the transition, but not often a mix of the 2 (at least I don't remember having the need for that so far, unless i listen to all 4 events at once).
You can also want to handle a single event, not both inside/outside, and with only didBlur code, this would be a bit weird (but I understand you propose an addition, not a replacement).
What you propose seems more like a shortcut than a primitive, and it can probably be implemented in userland. I'm not against it, but I think it will be hard to name it correctly and we can think about implementing this later if we find usage of useNavigationEvents too verbose and users are complaining.
I'm not totally fan of the current api anyway, as it forces us to receive all events melted inside the same callback and switch/case on the event type.
I'd rather advocate for such solutions
useNavigationEvents({
willFocus: evt => {},
didFocus: evt => {},
willBlur: evt => {},
didBlur: evt => {},
});
Or eventually one single event:
useNavigationEvent("willFocus",evt => {
});
I also like the useEffect hook, but for me its value is more related to the args parameter that you can pass so that it triggers or not the effect, which somehow reduce the boilerplate needed for many usecases usually implemented with lifecycle methods. useNavigationEvents does not take such params currently (but it should use it internally)
from hooks.
@sophiebits tweet today reminded me of this topic I opened a few months ago:
Fun fact: the original proposed design for Hooks didn't have useEffect; it instead had useLifeCycles(didMount, didUpdate, willUnmount);
We came up with useEffect and the "dependencies" array argument later. Glad we did.
- Sophie Alpert
I still believe that useNavigationEvents(handler)
would be a nicer API. Does someone else feel the same?
from hooks.
You can cancel the InteractionManager
directly without having a cancelled
property.
export const useIsFocusedLazy = () => {
const isFocused = useIsFocused();
const [isFocusedLazy, setFocusedLazy] = useState(isFocused);
useEffect(() => {
const delayedCallback = InteractionManager.runAfterInteractions(() => {
setFocusedLazy(isFocused);
});
return delayedCallback.cancel;
}, [isFocused]);
return isFocusedLazy;
};
IMO no need to keep it in the core.
from hooks.
We have a useFocusEffect
hook in React Navigation 5 which I think is similar to what's proposed here: https://reactnavigation.org/docs/en/next/use-focus-effect.html
The hooks mentioned for event listeners are quite different imo, and solve a different use case. The use cases for useFocusEffect
are more about managing subscriptions (such as adding a listener for back button, connecting to socket only when the screen is active etc.) rather than doing a one-off task on an event.
While this use case can be achieved with events (similar to how same thing as useEffect
can be done with lifecycle events), they aren't the right primitive for this use case. To achieve similar behaviour of running something on focus, then cleaning up on blur/unmount, the user will need to keep a reference to to the subscription, make sure the effect re-runs when a dependency changes etc, which is cumbersome.
Regarding transitions, I think it's not necessary to add separate hook for this because if the effect is expensive, you can run them in InteractionManager.runAfterInteractions
(which is also cancellable with the cleanup function).
from hooks.
useFocusEffect is being implemented here: #43 and it's going to be quite similar to the same hook on v5, to ensure smooth library upgrade.
In my app I'm using something like this also to ensure not showing some expensive comps until transition completes, does this makes sense to you ?
export const useIsFocusedLazy = () => {
const isFocused = useIsFocused();
const [isFocusedLazy, setFocusedLazy] = useState(isFocused);
useEffect(() => {
let cancelled = false;
if (isFocused) {
InteractionManager.runAfterInteractions(() => {
if (!cancelled) {
setFocusedLazy(true);
}
});
} else {
InteractionManager.runAfterInteractions(() => {
if (!cancelled) {
setFocusedLazy(false);
}
});
}
return () => {
cancelled = true;
};
}, [isFocused]);
return isFocusedLazy;
};
Not sure if this kind of stuff should be included, or if this could be an userland recipe.
from hooks.
Ah thanks, totally missed that, last time I read the types I thought it was returning a promise and didn't see the cancel()
from hooks.
https://github.com/react-navigation/hooks#usefocuseffectcallback
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.