search

okwasniewski / react-native-bottom-tabs

Native Bottom Tabs for React Native
https://okwasniewski.github.io/react-native-bottom-tabs/
MIT License
525 stars 18 forks source link

Implement `detachInactiveScreens` #71

Open okwasniewski opened 2 weeks ago

okwasniewski commented 2 weeks ago

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 commented 2 days ago

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 commented 2 days ago

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 commented 1 day ago

Looks like in V7 its called detachInactiveScreens

shubhamguptadream11 commented 1 day ago

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.