Estoy creando una aplicación con React Native, en la que necesito extraer datos de una base de datos (Firebase) antes de representar una página. Tengo dificultades para actualizar las variables antes de que se llame a la devolución. Tampoco puedo cambiar la exportación predeterminada a una clase, ya que planeo usar una función (selector de imágenes) que requiere ganchos. He incluido un código similar al que tengo a continuación.

 export default function ProfileScreen(){ let displayName = "" let skillLevel = "Iron 2" let mainCharacter = "Astra" useEffect(() => { populateFieldsFromDB() }, []) const populateFieldsFromDB = async () => { let userUUID = await SecureStore.getItemAsync("userUUID") if(userUUID != null){ const user = await firebase.firestore().collection("Users").doc(userUUID).get() if("displayName" in user.data()){ displayName = user.data().displayName } if("rank" in user.data()){ skillLevel = user.data().rank console.log(skillLevel) } if("main" in user.data()){ mainCharacter = user.data().main } } } return( <TextInput style={styles.textField} onChangeText={text => onDisplayNameChange(text)} defaultValue={displayName} placeholder='Enter your Riot Name and discriminator (ie John#1234)' keyboardAppearance="dark" placeholderTextColor="#003800" /> )

En este caso, el valor predeterminado de la entrada de texto es la cadena vacía, no lo que se actualiza después de la llamada populateFieldsFromDB(). ¡Cualquier ayuda sería muy apreciada!