enableFreeze cause to bottom tab navigator unresponsive

[inthisar-hamza]

Description

Everything looks good when enableFreeze is disabled but it causes performance issues due to redux data change on every screen that subscribes to the same data and the logic behind it was a little expensive.

The solution was enableFreeze, which stops rerendering screens when it's inactive but leads to the bottom tab navigator being unresponsive or the active screen not changing when the tab is pressed.

I tried to update the react native screens version to the latest but it caused a CMake build error,
but when it's on this screen version (3.22.0) and @react-navigation v6 clean build got success.

Steps to reproduce

1. enableScreens(true) and enableFreeze(true) on app.tsx
2. press the random tab repeatedly on the navigator
   then the active screen becomes unresponsive to the tab press change

Snack or a link to a repository

https://github.com/inthisar-hamza/demo-reproduce

Screens version

3.22.0

React Native version

0.72.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Real device

Device model

Redmi Note 12

Acknowledgements

Yes

[alduzy]

@inthisar-hamza Thanks for submitting the issue. Unfortunately I was unable to reproduce it. I attach a snack with a very minimal repro I prepared. Please let me know if the issue persists when you paste it into App.tsx in your application.

snack

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { enableFreeze, enableScreens } from 'react-native-screens';

enableScreens(true);
enableFreeze(true);

const Tab = createBottomTabNavigator();

const HomeScreenWrapper = (): JSX.Element => {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
};

const CategoriesScreenWrapper = (): JSX.Element => {
  return (
    <View style={styles.container}>
      <Text>Category</Text>
    </View>
  );
};

const ExpensesScreenWrapper = (): JSX.Element => {
  return (
    <View style={styles.container}>
      <Text>Records</Text>
    </View>
  );
};

const SummaryWrapper = (): JSX.Element => {
  return (
    <View style={styles.container}>
      <Text>Summary</Text>
    </View>
  );
};

const AccountWrapper = (): JSX.Element => {
  return (
    <View style={styles.container}>
      <Text>Account</Text>
    </View>
  );
};

const MainNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        lazy: true,
        freezeOnBlur: true,
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreenWrapper}
        options={{
          headerShown: false,
          freezeOnBlur: true,
          tabBarLabel: 'Home',
        }}
      />
      <Tab.Screen
        name="My Categories"
        component={CategoriesScreenWrapper}
        options={{
          headerShown: false,
          freezeOnBlur: true,
          tabBarLabel: 'Categories',
        }}
      />

      <Tab.Screen
        name="Expenses"
        component={ExpensesScreenWrapper}
        options={{
          headerShown: false,
          freezeOnBlur: true,
          tabBarLabel: 'Records',
        }}
      />
      <Tab.Screen
        name="Analytics"
        component={SummaryWrapper}
        options={{
          headerShown: false,
          freezeOnBlur: true,
          tabBarLabel: 'Overview',
        }}
      />
      <Tab.Screen
        name="Accounts"
        component={AccountWrapper}
        options={{
          headerShown: false,
          lazy: false,
          freezeOnBlur: true,
          tabBarLabel: 'Account',
        }}
      />
    </Tab.Navigator>
  );
};

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Main" component={MainNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

[inthisar-hamza]

Screenrecorder-2024-10-12-11-26-01-689.mp4

Did that, Why is this happening?

[inthisar-hamza]

@alduzy it works fine on the latest React Native version "0.75.4"

[alduzy]

@inthisar-hamza Did you manage to upgrade the packages in your project to the latest, does it work as expected?

[inthisar-hamza]

@alduzy yeah, I updated every packages to latest version including react-native-screens, Gesture handler, react native reanimated and navigations and it worked as expected.

I have to test performance and bugs in navigation with freezOnBlur

[alduzy]

I'm glad to hear that it works! 🎉