Skip to content
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

Implement freezeOnBlur #71

Open
okwasniewski opened this issue Oct 21, 2024 · 4 comments · Fixed by #207
Open

Implement freezeOnBlur #71

okwasniewski opened this issue Oct 21, 2024 · 4 comments · Fixed by #207

Comments

@okwasniewski
Copy link
Collaborator

freezeOnBlur

Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when enableFreeze() from react-native-screens package is run at the top of the application.

Requires react-native-screens version >=3.16.0.

Only supported on iOS and Android.

@shubhamguptadream11
Copy link
Contributor

Hi @okwasniewski ,

I've been reviewing the freezeOnBlur implementation in the JS bottom tabs. In that setup, freezeOnBlur is passed as a screenOptions from Tab.navigator or directly in the options for each Screen. It ultimately propagates this prop to Screens from react-native-screens (code reference).

This approach leverages react-freeze to manage screen freezing.

However, for NativeBottomTabs, we're using platform-specific APIs to create the bottom tabs, which means we aren’t leveraging react-native-screens. Given this, would you recommend a custom approach to achieve similar functionality for freezeOnBlur?

One possibility might be to use information about loaded tabs to manage freezing behaviour (see reference).

Additionally, enableFreeze() currently has no effect in NativeBottomTabs, I’m curious if you’d suggest any alternative approaches or improvements here.

Thanks for your guidance!

@okwasniewski
Copy link
Collaborator Author

okwasniewski commented Nov 2, 2024

Hey @shubhamguptadream11,

Thanks for looking into this!

I was thinking that we can take the JS implementation and wrap each screen with ScreenFallback.

https://github.com/react-navigation/react-navigation/blob/581681aea465b871728b9d7e4b1a6eebbcf05ed0/packages/bottom-tabs/src/views/ScreenFallback.tsx

We are currently wrapping each screen with View anyways so this can be changed to the ScreenFallback:

This should be an optional peer dependency as this prop will be optional.

@okwasniewski okwasniewski changed the title Implement freezeOnBlur Implement detachInactiveScreens Nov 3, 2024
@okwasniewski
Copy link
Collaborator Author

Looks like in V7 its called detachInactiveScreens

@shubhamguptadream11
Copy link
Contributor

shubhamguptadream11 commented Nov 3, 2024

I think no!
https://github.com/react-navigation/react-navigation/blob/581681aea465b871728b9d7e4b1a6eebbcf05ed0/packages/bottom-tabs/src/types.tsx#L404

It's purpose is to save memory by detaching the view.

But to make freezeOnBlur works, detachInactiveScreens must be true which is it's default value.

@okwasniewski okwasniewski linked a pull request Nov 3, 2024 that will close this issue
@okwasniewski okwasniewski changed the title Implement detachInactiveScreens Implement freezeOnBlur Nov 12, 2024
@okwasniewski okwasniewski linked a pull request Dec 16, 2024 that will close this issue
@okwasniewski okwasniewski reopened this Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants