[Android][BottomTabs] - Content is gone when pressing fast a tab in a nested screen + native crash

[ferrannp]

Description

When you have bottom native tabs on Android and nested screens, if you press the tab fast to go back to the first screen, then the content disappears. Before react-native-screens 4.26.0, this was crashing the app, now the content just goes away.

Video:

contentIsGone.mov

Edit: If you press fast several times, it still crashes:

Steps to reproduce

• Native bottom tabs
• Nested screen inside the tab
• Go to that screen
• Press the tab fast

Snack or a link to a repository

https://github.com/ferrannp/react-native-screens-navigation-v8-repo

Screens version

4.26.0

React Native version

0.86.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 8

Acknowledgements

Yes

[t0maboro]

Hi @ferrannp , thanks for reporting that. I can confirm that the issue is reproducible on our end. I'm adding it to our list for the next planning.

import React from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';
import { SafeAreaView } from 'react-native-screens/experimental';

const Stack = createNativeStackNavigator();
const Tab = createNativeBottomTabNavigator();

const ScreenOne = ({ navigation }) => {
  return (
    <SafeAreaView
      edges={{ bottom: true }}
      style={[styles.container, { justifyContent: 'flex-end' }]}>
      <Text style={styles.text}>This is Screen 1</Text>
      <Pressable
        style={styles.button}
        onPress={() => navigation.navigate('ScreenTwo')}>
        <Text style={styles.buttonText}>Go to Screen 2</Text>
      </Pressable>
    </SafeAreaView>
  );
};

const ScreenTwo = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>This is Screen 2</Text>
    </View>
  );
};

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="ScreenOne"
        component={ScreenOne}
        options={{ title: 'Home' }}
      />
      <Stack.Screen
        name="ScreenTwo"
        component={ScreenTwo}
        options={{ title: 'Details' }}
      />
    </Stack.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="HomeTab"
          component={HomeStack}
          options={{
            title: 'Home',
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f2f2f2',
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
    color: '#333',
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

[kkafar]

@ferrannp this is likely already fixed with 4.26.2. Please confirm it for us. We can not reproduce the issue anymore.

[ferrannp]

Still crashes for me. And not only in tabs, also when trying to replace a screen.

    "@react-navigation/bottom-tabs": "8.0.0-alpha.41",
    "@react-navigation/native": "8.0.0-alpha.36",
    "@react-navigation/native-stack": "8.0.0-alpha.44",
    "react-native-screens": "4.26.2"

[kkafar]

Reproduction for the crash:

Reproduction code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import { NewAppScreen } from '@react-native/new-app-screen';
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { Button, StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

const Tabs = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
const RootStack = createNativeStackNavigator();
const TopRootStack = createNativeStackNavigator();

function Content() {
  const navigation = useNavigation('Home');
  return (
    <View style={styles.container}>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go to Settings" onPress={() => navigation.navigate('Settings')} />
      <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} />
    </View>
  )
}

function ContentSettings() {
  const navigation = useNavigation('Settings');
  return (
    <View style={styles.container}>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go to Settings" onPress={() => navigation.navigate('Settings')} />
      <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} />
    </View>
  )
}

function ContentProfile() {
  const navigation = useNavigation('Profile');
  return (
    <View style={[styles.container]}>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go to Settings" onPress={() => navigation.navigate('Settings')} />
      <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} />
    </View>
  )
}

function StackContentHome() {
  const navigation = useNavigation('SettingsHome');
  return (
    <View style={styles.container}>
      <Button title="Go to SettingsHome" onPress={() => navigation.navigate('SettingsHome')} />
      <Button title="Go to SettingsFirst" onPress={() => navigation.navigate('SettingsFirst')} />
      <Button title="Go to SettingsSecond" onPress={() => navigation.navigate('SettingsSecond')} />
    </View>
  )
}

function StackContentFirst() {
  const navigation = useNavigation('SettingsFirst');

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <View collapsable={false} style={{ backgroundColor: 'red', width: 100, height: 100 }} />
      )

    });
  }, []);

  return (
    <View style={[styles.container, { justifyContent: 'flex-end', }]}>
      <Button title="Go to SettingsHome" onPress={() => navigation.navigate('SettingsHome')} />
      <Button title="Go to SettingsFirst" onPress={() => navigation.navigate('SettingsFirst')} />
      <Button title="Go to SettingsSecond" onPress={() => navigation.navigate('SettingsSecond')} />
    </View>
  )
}

function StackContentSecond() {
  const navigation = useNavigation('SettingsSecond');
  return (
    <View style={styles.container}>
      <Button title="Go to SettingsHome" onPress={() => navigation.navigate('SettingsHome')} />
      <Button title="Go to SettingsFirst" onPress={() => navigation.navigate('SettingsFirst')} />
      <Button title="Go to SettingsSecond" onPress={() => navigation.navigate('SettingsSecond')} />
    </View>
  )
}


function AppContent() {
  return (
    <NavigationContainer>
      <MostOuterStack />
    </NavigationContainer>
  );
}

function OuterStackContents() {
  return (
    <RootStack.Navigator>
      <RootStack.Screen name="Tabs" component={TabsScreen} />
    </RootStack.Navigator>
  )
}

function TabsScreen() {
  return (
    <Tabs.Navigator>
      <Tabs.Screen name="Home" component={SettingsScreen} />
      <Tabs.Screen name="Settings" component={SettingsScreen} />
      <Tabs.Screen name="Profile" component={SettingsScreen} />
    </Tabs.Navigator>
  )

}

function SettingsScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="SettingsHome" component={StackContentHome} />
      <Stack.Screen name="SettingsFirst" component={StackContentFirst} />
      <Stack.Screen name="SettingsSecond" component={StackContentSecond} />
    </Stack.Navigator>
  );
}

function MostOuterStack() {
  return (

    <TopRootStack.Navigator>
      <TopRootStack.Screen name="RootStack" component={OuterStackContents} />
    </TopRootStack.Navigator>
  )
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-end',
    paddingBottom: 64,
    flex: 1,
  },
});

export default App;

I think it could be vastly simplified. I think that the key here is the call to navigation.setOptions in the nested stack.