React Native Alert doesn't accept Navigation in my code - react-native

Question

I'm trying to add a navigation in this Alert with Dialog, in the 'OK' option to confirm Logout and go back to the login screen, however it's not working. Does anyone help me with this?
I'm also trying to insert a dark theme for the entire application, local expo finger printing and push notifications in setData options 2, 3, and 4, but it's a difficult task as well.. But I'm more focused on creating this Navigation in my Alert because I'm trying.
i'll be very grateful for the help :)
when I grow up, I'm going to be a great programmer.
import { SafeAreaView,Text, View, FlatList,
TouchableOpacity, StyleSheet, Image, Switch, Alert} from 'react-native';
import { Entypo } from 'react-native-vector-icons';
import React, {useState, useEffect} from 'react';
import { useNavigation } from '#react-navigation/native';
import * as LocalAuthentication from 'expo-local-authentication';
//import Auth from './Biometric'
const Settings = () =>{
const [data, setData] = useState([
{ id: 1, text: 'Perfil', image: require('../../assets/images/user.png'), chosen: false },
{ id: 2, text: 'TouchId', image: require('../../assets/images/fingerprint.png'), chosen: false },
{ id: 3, text: 'Dark/Light mode', image: require('../../assets/images/light-up.png'), chosen: false },
{ id: 4, text: 'Notificações', image: require('../../assets/images/bell-fill.png'), chosen: false },
]);
const [isRender, setisRender] = useState(false);
const navigation = useNavigation();
const handleLogout = () => {
//navigation.navigate();
Alert.alert('Logout!', 'Deseja realmente sair?', [
{
text: 'Cancelar',
onPress: () => {},
},
{
text: 'OK',
onPress:()=>
{navigation.navigate ("Login")}
},
]);
}
const renderItem = ({ item }) => {
return (
<TouchableOpacity
style={styles.item}
>
<View style={styles.avatarContainer}>
<Image source={item.image} style={styles.avatar} />
</View>
<View>
<Text style={styles.text}>{item.text}</Text>
</View>
{item.id > 1 && <Switch style={{ width: 10, alignItems: 'flex-end',
marginTop: 15, flex: 1, marginEnd: 30}}
thumbColor={item.chosen == false ? "#CDCDCD" : "#A0D800"}
trackColor={{ true: "#CDCDCD" }}
value={item.chosen}
onChange={() => setData(data.map(index => item.id === index.id
? { ...index, chosen: !index.chosen }
: index
))} />}
{item.id === 2
}
</TouchableOpacity>
);
};
return (
<SafeAreaView style={styles.container}>
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={renderItem}
extraData={isRender} />
<View style = {{alignSelf: 'center',}}>
<TouchableOpacity
onPress={()=> (handleLogout)}
style = {{borderRadius: 10,
alignItems: "center",
backgroundColor: "#A0D800",height: 50, width: 200,
bottom: 15,
shadowColor: 'rgba(0,0,0, .4)', // IOS
shadowOffset: { height: 1, width: 1 }, // IOS
shadowOpacity: 1, // IOS
shadowRadius: 1, //IOS
elevation: 2, // Android
}}>
<Text style={{color: "#ffffff",
fontWeight: 'bold', fontSize: 17,
padding: 5, bottom: 0, marginTop: 5,
}}>
SignOut
</Text>
<Entypo name={'log-out'}
style={{alignSelf: 'flex-end', bottom: 25,
marginEnd: 25}}
color={'#ffffff'}
size={20}
/>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20
//marginHorizontal: 21
},
item:{
borderBottomWidth: 1,
borderBottomColor: '#808080',
alignItems: 'flex-start',
flexDirection: 'row',
},
avatarContainer: {
backgroundColor: 'transparent',
//borderRadius: 100,
height: 30,
width: 30,
justifyContent: 'center',
alignItems: 'center',
},
avatar: {
height: 25,
width: 25,
bottom: -25,
marginLeft: 30
},
text:{
marginVertical: 30,
fontSize: 20,
fontWeight: 'bold',
marginLeft: 30,
marginBottom: 10,
bottom: 5
},
});
export default Settings;

Answer 1

Your mistake is because of your onPress={()=> (handleLogout)}. onPress takes in a function but in your case you are making the function run another function, so your alert will not even be activated. To fix this, simply change your code to this.
onPress={handleLogout}