How do I pass a state object to a screen in React Native? - reactjs

Question

** i want to pass the setScreen object to Signup screen
please tell me how do i pass it so i could change the screen state from Signup screen**
import React, { useState } from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import AccountScreen from './src/screens/AccountScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackListScreen from './src/screens/TrackListScreen';
const Stack = createStackNavigator();
const TrackStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const TrackScreenStack = () => {
return (
<TrackStack.Navigator initialRouteName="TrackList">
<TrackStack.Screen
name="TrackList"
component={TrackListScreen}
/>
<TrackStack.Screen
name="TrackDetail"
component={TrackDetailScreen}
/>
</TrackStack.Navigator>
)
}
** here i have declared the state object
and i wish to pass it in Signup screen
so that i could switch between screen stacks**
const App = () => {
const [screen, setScreen] = useState(true);
return (
<NavigationContainer>
{screen ? (
<Stack.Navigator initialRouteName="Signup">
<Stack.Screen
name="Signup"
component={SignupScreen}
/>
<Stack.Screen
name="Signin"
component={SigninScreen}
/>
</Stack.Navigator>
) :
<Tab.Navigator>
<Tab.Screen
name="Track"
component={TrackScreenStack}
/>
<Tab.Screen
name="Account"
component={AccountScreen}
/>
<Tab.Screen
name="TrackCreate"
component={TrackCreateScreen}
/>
</Tab.Navigator>
}
</NavigationContainer>
)
}
export default App;