Crypto.getRandomValues() not supported

I am geting the this error when I run my expo app

crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported

the app starts and later crashes with this error and I can’t seem to figure out where it could be coming from because everything seemed to be working fine earlier. I have deleted node modules and re installed with npm install but error persists. it crashes on the login screen actually so here is the loginScreen.js

import React, { Component, useState } from 'react'
import { SafeAreaView, Button, TextInput, View, Text, 
TouchableOpacity, Alert, KeyboardAvoidingView } from 'react-native'

import AsyncStorage from '@react-native-async-storage/async-storage';


import firebase from 'firebase/compat/app'

import { getAuth, signInWithEmailAndPassword, sendPasswordResetEmail,
setPersistence, inMemoryPersistence, reactNativeLocalPersistence,browserSessionPersistence,
Persistence,} from 'firebase/auth';

import { NavigationContainer } from '@react-navigation/native';


export class Login extends Component {

constructor(props) {

    super(props);
    
   this.state = {
    email: '',
    password: '',
    logingPending: false,
    //userData: {}
   }
   this.onSignIn = this.onSignIn.bind(this)
   this.onResetPassword = this.onResetPassword.bind(this)
};

 async setPersistence(persistence) {
  const  Persistence = persistence
    ? browserSessionPersistence
    : inMemoryPersistence;

  await setPersistence(this.auth, type);
}

onResetPassword() {
  const auth = getAuth();
  const { email, password, logingPending } = this.state
  if(email.trim().length == 0){
    Alert.alert(
      "",
      "please provide your email ",
      [
        
        { text: "OK", onPress: () => this.setState({logingPending:false}) }
      ])
  }else {
sendPasswordResetEmail(auth, email)
.then(() => {
console.log ('')

Alert.alert(
  "",
  "Password reset email sent to ",
  [
    
    { text: "OK", onPress: () => this.setState({logingPending:false}) }
  ])

})
 .catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;

Alert.alert(
  "",
 errorMessage,
  [
    
    { text: "OK", onPress: () => this.setState({logingPending:false}) }
  ])


});
}}


onSignIn(props) {
    const auth = getAuth();
      const { email, password, logingPending } = this.state
      //logingPending: true

      if(email.trim().length == 0 && password.trim.length == 0){
        this.setState({logingPending:false})
        Alert.alert(
          "",
          "Fields can't be empty",
          [
            
            { text: "OK", onPress: () => this.setState({logingPending:false}) }
          ])
        //return
     }else {


      signInWithEmailAndPassword( auth, email, password)
      .then((result) => {

        
       // this.setState({logingPending:false})
        //this.props.navigation.goBack()
      })
      .catch((error) => {
        console.log(error)


       Alert.alert(
           "Login Error",
             'Please confirm your details',
             [
    
                { text: "OK", onPress: () => this.setState({logingPending:false}) }
            ])   
        this.setState({logingPending:false})
        //Alert.alert(error)
        
      })
    } 
}

async storeToken(user) {
  try {
     await AsyncStorage.setItem("userData", JSON.stringify(user));
  } catch (error) {
    console.log("Something went wrong", error);
  }
}


render() {
return (
  <SafeAreaView style = {{ backgroundColor:'lightgray', height:'100%'}}>
    <View style={{
    backgroundColor:'white',
     padding:10,
     margin:10, 
     borderRadius:10,
     minHeight:'50%',
     marginTop: 20
     }}>
  

    <Text style = {{fontSize: 30, 
      fontWeight: 'bold',
       color: 'green', 
       marginBottom: 30}}> Login </Text>


      <View style={{margin: 10,
       backgroundColor:'lightgray',
       borderRadius:10}}>
        {/* <MateriaIcons name='email' size={20} color='#666' style={{marginLeft: 5}} /> */}
        <TextInput style={{borderRadius: 5,
         marginLeft:20,
         marginRight:20, 
         padding: 15,
         color:'black',
         fontWeight: 'bold',
         marginTop: 2
         }} placeholder='email address' autoCorrect={false} onChangeText={(email) => this.setState({email})}  
        keyboardType ='email-address'
        />
      </View>

      <View style={{margin: 10,
       backgroundColor:'lightgray',
       borderRadius:10}}>
        {/* <MateriaIonicons name='ios-lock-closed-outline' size={20} color='#666' style={{marginLeft: 5}} /> */}
        <TextInput style={{borderRadius: 5,
         marginLeft:20,
         marginRight:20, 
         padding: 15,
         color:'black',
         fontWeight: 'bold',
         marginTop: 2
         }} placeholder='password' autoCapitalize={'none'} autoCorrect={false} onChangeText={(password) => this.setState({password})} secureTextEntry= {true} 
        />
    
      
       
        </View>

        <TouchableOpacity style={{marginLeft:'70%', marginTop: 10}}
        onPress={() => {() => onResetPassword()}}>
          <Text style ={{color: 'red'}}>Forgot Password</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => {this.onSignIn(), this.setState({logingPending:true})} } style = {{
          backgroundColor: 'green',
          padding: 20,
          borderRadius: 10,
          marginTop: 20
        }}>
          <Text style={{textAlign: 'center', fontWeight: '700', fontSize: 16, color: '#fff'}}> Login </Text>
        </TouchableOpacity>

        <View style = {{flexDirection: 'row', justifyContent: 'center', marginTop: 30}}>
      <Text>
        Not yet a customer?
      </Text>

      <TouchableOpacity onPress={ () => {
        this.props.navigation.navigate("Register")
      }}>
        <Text style={{color: 'green', fontWeight: '700'}}> JOIN!</Text>
      </TouchableOpacity>
      </View>
      </View>
      
  </SafeAreaView>
)
 }
}

export default Login