how to use navigation.navigate together with render() to change tab - react-native

Question

I have a Floating Action Button with two internal buttons, the idea is that after clicking on the first FAB (Floating Action Button) the others are displayed, what I require is that I can click on one of the buttons that was displayed and send me to the login or to another tab, page, route.
The error I have is that I don't know where I can do the "const navigation = useNavigation()" to use the navigator and send the user to another tab
i tried to use this.props, but i couldn't get it
export default class FloatingButton extends React.Component {
handleSignOut = () => {
Alert.alert("Position 1")
authentication
.signOut()
.then(() => {
this.props.navigation.navigate("Login")
})
.catch(error => alert(error.message))
}
handleSignOut2 = () =>{Alert.alert("Position 2")}
animation = new Animated.Value(0);
toggleMenu = () => {
const toValue = this.open ? 0 : 1;
Animated.spring(this.animation, {
toValue,
friction: 5,
useNativeDriver: false
}).start();
this.open = !this.open;
};
render() {
const pinStyle2 = {
transform: [
{ scale: this.animation },
{
translateY: this.animation.interpolate({
inputRange: [0, 1],
outputRange: [0, -10]
})
}
]
};
const pinStyle = {
transform: [
{ scale: this.animation },
{
translateY: this.animation.interpolate({
inputRange: [0, 1],
outputRange: [0, -20]
})
}
]
};
const rotation = {
transform: [
{
rotate: this.animation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "45deg"]
})
}
]
};
const opacity = this.animation.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 0, 1]
})
return (
<View style={[styles.container, this.props.style]}>
<TouchableWithoutFeedback onPress={this.handleSignOut}>
<Animated.View style={[styles.button, styles.secondary, styles.menu, pinStyle, opacity]}>
<Entypo name="add-to-list" size={24} color="white" />
</Animated.View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleSignOut2}>
<Animated.View style={[styles.button, styles.secondary, styles.menu, pinStyle2, opacity]}>
<Entypo name="check" size={24} color="white" />
</Animated.View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.toggleMenu}>
<Animated.View style={[styles.button, styles.menu, rotation]}>
<AntDesign name="plus" size={24} color="white" />
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}

Answer 1

According to the react documentation "You can’t use Hooks inside a class component". (https://reactjs.org/docs/hooks-faq.html). And thats what you're doing useNavigation is a hook and you're calling it inside a class. So either
- Change your class into a function
or
- Find a way to express the same functionality as the useNavigation hook but in a class