Comments (6)
Yeah we know about issues with reanimated perf regarding mount/re-render and trying to improve it.
So you mean I should rather, like your code, not rely at all on useState to avoid any unnecessary render right?
It would be ideal, imo
from hooks.
we agreed this backhandler should be implemented by users. This pattern has been added to doc:
const useBackHandler = (backHandler: () => boolean) => {
useFocusEffect(() => {
const subscription = BackHandler.addEventListener('hardwareBackPress', backHandler);
return () => subscription.remove();
});
};
in #43
from hooks.
@satya164 I'm using this in my app and it seems to work, does it feel right to you?
export const useBackHandler = (handler: () => boolean) => {
const focusState = useFocusState();
const canHandleBack = (focusState.isFocusing || focusState.isFocused) && !focusState.isBlurring;
useEffect(() => {
if (canHandleBack) {
// Normally, it's fast to unsub/resub
BackHandler.addEventListener('hardwareBackPress', handler);
return () =>
BackHandler.removeEventListener('hardwareBackPress', handler);
}
}, [canHandleBack, handler]);
};
Basically, we want to handle android back hardware button, when focusing/focused, but not blurring (because the screen is already leaving anyway).
That seems pretty similar to the lib of @vonovak that handles back between willFocus and willBlur.
As far as I remember in v5 you don't have focusing/focused/blurring/blurred transition? so how do you know how to handle back during those transitions?
from hooks.
@satya164 btw that seems like a nice usecase for implementing your useFocusEffect
you discussed here: #9 (comment)
Does this feel similar to what you have in v5? In my app it seems to work fine.
// Useful to access the latest user-provided value
const useGetter = <S extends {}>(value: S): (() => S) => {
const ref = useRef(value);
useLayoutEffect(() => {
ref.current = value;
});
return useCallback(() => ref.current, [ref]);
};
export const useFocusEffect = (
effect: () => void | (() => void | undefined),
) => {
const getEffect = useGetter(effect);
const focusState = useFocusState();
const runEffect =
(focusState.isFocusing || focusState.isFocused) && !focusState.isBlurring;
useEffect(() => {
if (runEffect) {
return getEffect()();
}
}, [runEffect, getEffect]);
};
export const useBackHandler = (backHandler: () => boolean) => {
const getBackHandler = useGetter(backHandler);
useFocusEffect(() => {
const latestBackHandler = getBackHandler();
// Normally, it's fast to unsub/resub
BackHandler.addEventListener('hardwareBackPress', latestBackHandler);
return () =>
BackHandler.removeEventListener('hardwareBackPress', latestBackHandler);
});
};
I'm not sure what logic you have for runEffect
boolean. Should we cleanup that focus effect at the beginning or end of the blur transition?
from hooks.
does it feel right to you?
I think it's okay. The disadvantage here is that it adds 2 extra re-renders on mount and 1 on unmount which can affect the animation smoothness (even if it's native driver).
As far as I remember in v5 you don't have focusing/focused/blurring/blurred transition?
We don't have focusing
and blurring
events, but we still fire focus
and blur
events in addition to transitionStart
and transitionEnd
events which are specific to stack.
useFocusEffect
subscribes to these events internally and manages running the effect: https://github.com/react-navigation/navigation-ex/blob/1153d5575b5d37b5c889158600162be8132b61eb/packages/core/src/useFocusEffect.tsx#L16
Does this feel similar to what you have in v5? In my app it seems to work fine.
The problem is extra re-renders. Even with re-animated we've found that these re-renders during animation really hurt the smoothness.
Should we cleanup that focus effect at the beginning or end of the blur transition?
In v5 the focus
and blur
events fire at the beginning of the transition. I think this is a good place to cleanup the listener. Since the previous screen is already losing focus, no reason it needs to keep listening to the event.
from hooks.
Yeah, I noticed too that rendering reanimated nodes can sometimes be costy (but reduced it well memoized). Also noticed that reanimated heavy things takes some time to mount, not sure if this is discussed anywhere?
So you mean I should rather, like your code, not rely at all on useState to avoid any unnecessary render right?
Also, not fan of "useFocusState()", as people will use v5 sooner or later I'd rather expose a useFocused() hook that would just return a boolean. Not really fan of "useFocusState()" and as you said it's likely to trigger unnecessary render + make v5 migration more complicated for users.
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.