Eu modifiquei para o código abaixo e colocando um console.log dentro da função App(), percebi que ela é chamada novamente, entretanto não atualiza o return com a variável nome.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
let nome = 'vazio'
let chamouFuncao = false
export default function App() {
console.log('Dentro da função App e a variável nome é '+nome)
if(!chamouFuncao){
esperarsegundos()
}
chamouFuncao = true
/*
const [message, setMessage] = useState('');
const [list, setList] = useState([]);
const inputMessage = useRef();
function handlerMessageChange(event) {
const { value } = event.target;
setMessage(value);
}
function handlerButtonSend() {
socket.emit('chat message', message);
setMessage('');
handleInputMessageFocus();
}
*/
async function esperarsegundos(){
let antes = Date.now()
setTimeout(() => {
styles.green = {
color: 'black',
fontSize: 100
}
styles.green = {
color: 'black'
}
nome = 'umapessoaqualquer'
styles.green = {
color: 'green',
fontSize: 30
}
console.log(styles.green, nome)
App()
}, 3000)
//App()
console.log('A função async durou '+(Date.now() - antes)+ ' milissegundos.')
}
return (
<View style={styles.container}>
<Text style={styles.green}>Verde</Text>
<Text style={styles.bigblue}>Azul</Text>
<Text style={[styles.bigblue, styles.green]}>Azul, depois verde</Text>
<Text style={[styles.green, styles.bigblue]}>Verde, depois azul</Text>
<Text>{nome ? nome : 'false'}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 50
},
green: {
color: 'green',
fontSize: 30
}
});