Modal transparent prop set to true crashes my app on iOS whenever the Stack.Navigator changes of screen in React Native

Question

I've found this problem in Expo in which whenever Stack.Navigator (@react-navigation/native-stack) changes the screen, from one that contains a Modal with transparent property set to true, the app crashes on iOS (not on android).

Code:

// Login.tsx file 

 <Modal transparent={true} visible={modalVisible} animationType='slide'>
                <View style={[styles.container, {justifyContent: "flex-end"}]}>
                    <View style={[styles.container, {flex: 0.8}]}> 
                        <TextInput onChangeText={(text) => setEmail(text)} value={email} autoCapitalize='none' style={styles.input} placeholder='email' placeholderTextColor={"#898989"}></TextInput>
                        <TextInput onChangeText={(text) => setPassword(text)} value={password} autoCapitalize='none' style={styles.input} placeholder='password' secureTextEntry placeholderTextColor={"#898989"}></TextInput>
                        {loading ? <ActivityIndicator size="large" color="#c59e69"/> : 
                        <>
                        <Button color="#c59e69" title="login" onPress={signIn}/>
                        <Button color="#c59e69" title="create account" onPress={signUp}/>
                        <Button color="#121212" title="Guest" onPress={guestAccess}/>
                        </>}
                    </View>
                </View> 
                <Button title="Remove Modal" onPress={() => setModalVisible(false)}/>
   </Modal>

signIn and guestAccess functions lead to firebase functions signInWithEmailAndPassword and signInAnonymously respectively. this changes the Auth state which then changes the user state variable on App.tsx, which is the one used to identify on which stack screen the user should be:

// App.tsx

const Stack = createNativeStackNavigator()

export default function App() {

  const [user, setUser] = useState<User | null>(null)

  const auth = AUTH

  useEffect(() => {
    onAuthStateChanged(AUTH, (user) => setUser(user)) 
  
   
  }, [])
  

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Login'>
        { user ? <Stack.Screen name='Inside' component={InsideLayout} options={{ headerShown: false,}}/> : <Stack.Screen name="Login" component={Login} options={{ headerShown: false}} />}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// This is my package.json

{
  "name": "cottage",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~49.0.15",
    "expo-av": "~13.4.1",
    "expo-firebase-recaptcha": "^2.3.1",
    "expo-font": "~11.4.0",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-responder": "^0.1.1",
    "react-native-modal": "^13.0.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6",
    "expo-build-properties": "~0.8.3",
    "expo-apple-authentication": "~6.1.0",
    "expo-dev-client": "~2.4.12"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

**What did you try and what were you expecting? ** Tried setting transparent to false right before changing screen, but didn't work.

Edit: Also tried presentationStyle="formSheet" and crashes too.

Answer 1

Found out what I was doing wrong. I had to first close the modal, and then proceed with the user auth. IM NEW SORRY