I can't change the screen - react-native

Question

I've got a component(Bottom.js) inside of another component(LoginScreen.js), inside this component(Bottom.js) there is a button(TouchableOpacity), I want to press it and change the LoginScreen to RegisterScreen, but I can't! I tried to see the docs of react navigation and I still confused. Could someone help me?
App.js
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
//import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet } from 'react-native';
import LoginScreen from './src/screens/Login/LoginScreen';
import RegisterScreen from './src/screens/Register/RegisterScreen';
import mock from './src/mocks/Login'
const Stack = createStackNavigator();
const MyTheme = {
dark: false,
colors: {
background: 'rgb(7, 19, 24)',
},
};
export default function App(){
return (
<NavigationContainer theme={MyTheme}>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name='Login' >
{() => <LoginScreen {...mock}/>}
</Stack.Screen>
<Stack.Screen name='Register' >
{() => <RegisterScreen />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#071318',
},
});
LoginScreen.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {Button, Input, Image} from 'react-native-elements'
import Top from './components/Top'
import Form from './components/Form'
import ButtonEnter from './components/ButtonEnter'
import Bottom from './components/Bottom'
export default function LoginScreen({top, form, buttonEnter, bottom, navigation})
{
return <>
<View style={styles.background}>
<StatusBar style='light'/>
<Top {...top}/>
<Form {...form}/>
<ButtonEnter {...buttonEnter}/>
<Bottom {...bottom} {...navigation}/>
</View>
</>
}
const styles = StyleSheet.create({
background:{
backgroundColor: "#071318"
},
text:{
color:'#AAA',
fontSize: 16,
},
logo:{
width: 160,
height: 160,
marginHorizontal: '25%',
marginTop: '15%'
}
})
Bottom.js
import React from 'react';
import { StyleSheet,View, Text, TouchableOpacity} from 'react-native';
export default function Bottom({signupButtonText, navigation})
{
return <>
<View style={styles.view}>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Register')}>
<Text style={styles.helpButton}>{signupButtonText}</Text>
</TouchableOpacity>
</View>
</>
}
const styles = StyleSheet.create({
view:{
flexDirection:'row',
width: '70%',
height:'40%',
marginHorizontal:'15%',
justifyContent:'center',
},
button:{
marginTop: 16,
backgroundColor: '#0B2027',
paddingVertical: 12,
borderRadius:20,
width: 80,
alignItems: 'center',
position: 'absolute',
bottom: 30
},
image:{
width:'30%',
marginHorizontal:'35%'
},
helpButton:{
color:'white',
justifyContent:'space-around'
}
})
Register.js
import React from 'react'
import { View, Text } from 'react-native'
const RegisterScreen = ({navigation}) => {
return (
<View>
<Text>register</Text>
</View>
)
}
export default RegisterScreen

Answer 1

Bottom component is expecting to receive Navigation, not its properties, so try this:
<Bottom navigation={navigation} {...bottom}/>