iOS app crashes when navigating

[yahya-m2000]

Current behavior

When navigating between screens, it crashes instantaneously. There aren't any error codes for me to work with (I tried a try and catch), and I've searched everywhere online.

how the crash happens:

// TabNavigator.js
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {BlurView} from '@react-native-community/blur';
import {StyleSheet} from 'react-native';
import Foundation from 'react-native-vector-icons/Foundation';
import AntDesign from 'react-native-vector-icons/AntDesign';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

// screens
import {HomeScreen, ProfileScreen, SettingsScreen} from '../../screens';

const Tab = createBottomTabNavigator();

function BottomTabs() {
  try {
    return (
      <Tab.Navigator
        screenOptions={({route}) => ({
          headerShown: false,
          tabBarBackground: () => (
            <BlurView
              style={StyleSheet.absoluteFill}
              blurType="light"
              blurAmount={5}
            />
          ),
          tabBarStyle: {
            backgroundColor: 'transparent',
            position: 'absolute',
            bottom: 0,
          },
          tabBarIcon: ({color, size}) => {
            // Define icons for each route here
            if (route.name === 'Home') {
              return <Foundation name="home" size={size} color={color} />;
            } else if (route.name === 'Profile') {
              return <AntDesign name="user" size={size} color={color} />;
            } else if (route.name === 'Settings') {
              return <FontAwesome5 name="cog" size={size} color={color} />;
            }
          },
        })}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    );
  } catch (error) {
    console.log(`Navigation error: ${error}`);
  }
}

export {BottomTabs};

// RootNavigator.js

import React, {useEffect} from 'react';

import 'react-native-gesture-handler';

import {StatusBar, useColorScheme} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {BottomTabs} from './TabNavigator';
import useColors from '../../hooks/useColor';
import Colors from '../../theme/color';
import {SearchScreen} from '../../screens';

function RootNavigator() {
  const {colors, applyColors} = useColors();
  const colorScheme = useColorScheme();
  const Stack = createNativeStackNavigator();

  useEffect(() => {
    applyColors(colorScheme === 'dark' ? Colors.dark : Colors.light);
  }, [applyColors, colorScheme]); // Fix: Changed 'currentTheme' to 'colorScheme'

  return (
    <NavigationContainer>
      <StatusBar
        barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
      />
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="bottomTab" component={BottomTabs} />
        <Stack.Screen name="Search" component={SearchScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default RootNavigator;

Expected behavior

To navigate between screens when a Tab.Screen is selected.

Reproduction

https://github.com/yahya-m2000/campus_maps_v2

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	"^6.1.7"
@react-navigation/bottom-tabs	"^6.5.8"
@react-navigation/stack	"^6.3.17"
@react-navigation/native-stack	"^6.9.13"
react-native-safe-area-context	"^4.7.1"
react-native-screens	"^3.24.0"
react-native-gesture-handler	"^2.12.1"
react-native-reanimated	"^3.4.2"
react-native	"0.72.4"
node	">=16"
npm or yarn	"9.8.0"

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native
• @react-navigation/bottom-tabs
• @react-navigation/stack
• react-native-tab-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[benjamin-bitpoint]

I have same problem

[jbarranco18]

I had the same issue. I was able to solve it by setting detachInactiveScreens to false (it defaults to true) on BottomTab.Navigator https://reactnavigation.org/docs/stack-navigator/#detachinactivescreens

[neyosoft]

I have this same issue with RN 0.72.3

[jonalocum]

Having the same issue here. Upgraded from 0.69.5 to 0.72.4 following the upgrade helper, and android side is working fine, but ios seems to crash often on any navigation when first opening the app. Sometimes after multiple crashes it'll suddenly start working again without issues. No errors get logged at all in flipper, xcode or the terminal.

[KraljSamo]

Are you using XCode 15?

I just started experiencing the same when I upgraded from Xcode 14.3.1 to Xcode 15.

EDIT: Nevermind, for me it was due to "react-native-linear-gradient" library not being compatible with xcode 15. Upgrading this to 2.8.3 resolved the issue.

[yahya-m2000]

Are you using XCode 15?

I just started experiencing the same when I upgraded from Xcode 14.3.1 to Xcode 15.

EDIT: Nevermind, for me it was due to "react-native-linear-gradient" library not being compatible with xcode 15. Upgrading this to 2.8.3 resolved the issue.

I use Xcode 14, and I'm not using that library. Glad it worked out for you though!

[Srh07]

I have the exact same issue. I think this issue might be related #11259

In my app it's happening when going back with navigation.goBack() or navigation.popToTop()
I'm also using "react-native-linear-gradient", and updating it didn't help.

"react-native": "0.72.13",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"react-native-screens": "3.31.1",
"react-native-safe-area-context": "4.10.1",
"react-native-reanimated": "^3.11.0",
"react-native-linear-gradient": "^2.8.3"

XCode 15.3

[Srh07]

I got it working again with the following versions:
"react-native": "0.72.13",
"react-native-reanimated": "3.8.1",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"react-native-screens": "3.31.1",
"react-native-safe-area-context": "4.10.1"

XCode 15.3

The major thing I did was downgrading "react-native-reanimated" from 3.9.0 tot 3.8.1 and doing a "Clean build" within XCode. Only resetting cache when starting metro didn't seem enough.