React Navigation Bottom Tabs Navigator plus Modal Screen - react-native

Question

I have the following code to create a Tab using React Native Navigation v6.x:
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
The HomeScreen has a button which should call a Modal Screen.
My question is: How would I add this modal screen in my Navigator to call it from HomeScreen and how would be this call code?
Thanks!

Answer 1

You don't need to include the modal in the navigator to open it from the homepage.
You could do something like this:
const HomeScreen = () => {
const [modalVisible, setModalVisible] = useState(false);
function _myModal() {
return(
<Modal
animationType="slide"
visible={modalVisible}
onRequestClose={() => {setModalVisible(false)}}
>
<Text>Hello, I am a modal!</Text>
</Modal>
)
}
// your code
return (
<View>
{/*your code*/}
<Pressable
onPress={() => setModalVisible(true)}
>
<Text>Show Modal</Text>
</Pressable>
{_myModal()}
</View>
);
};
The React-Native documentation has an example for class component as well in case you're working with these, and more info that should help you as well.

Answer 2

If you want to open modal screen from your home page then you should create a home screen stack navigator and add two screen in that stack(home and modal screens), and then navigate to that modal by pressing button.
Tab Navigator(RootNavigation MyTabs)
...
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
Stack Navigator(HomeStack)
cosnt Stack = createStackNavigator();
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="ModalScreen" component={ModalScreen}
options={{ presentation: 'modal' }} />
</Stack.Navigator>
);
}
HomeScreen
export default function HomeScreen({navigation}) {
return (
<View>
<TouchableOpacity onPress={() => navigation.navigate('ModalScreen'}>
<Text>Open ModalScreen</Text>
</TouchableOpacity>
</View>
)
}