Implement `freezeOnBlur`

[okwasniewski]

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]

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]

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:

https://github.com/okwasniewski/react-native-bottom-tabs/blob/9ab4eead81ad0820128a09deea4cc82614715756/src/TabView.tsx#L257

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

[okwasniewski]

Looks like in V7 its called detachInactiveScreens

[shubhamguptadream11]

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.