I was looking at react navigation 5 docs and saw the example where you learn to make a full screen modal.
https://reactnavigation.org/docs/modal
In the example above they use a root stack navigator with a nested stack navigator and a screen named Modal, our screen modal, but for some reason mode="modal" prop is used in root stack navigator instead of ModalScreen component (our modal will go from bottom to top as it should, mode prop achieves this) but why is it not used in ModalScreen but in RoosStackNavigator
const MainStack = createStackNavigator();
const RootStack = createStackNavigator();
function RootStackScreen() {
return (
<RootStack.Navigator mode="modal">
<RootStack.Screen
name="Main"
component={MainStackScreen}
options={{ headerShown: false }}
/>
<RootStack.Screen name="MyModal" component={ModalScreen} />
</RootStack.Navigator>
);
}
function MainStackScreen() {
return (
<MainStack.Navigator>
<MainStack.Screen name="Home" component={HomeScreen} />
<MainStack.Screen name="Details" component={DetailsScreen} />
</MainStack.Navigator>
);
}
Related
I'm trying to use BottomTabNavigator in a new project but I am getting an error i had never seen.
This is the error
Error: A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. path: ''.
I use bottom Tab Navigation in few projects and I had never got this strange error, it seems a ReactJS error more than react native
This is my TabNavigator
import React from 'react';
import { View } from 'react-native';
import { NavigatorKeys } from '../screens';
const test = () => <View />;
function TabNavigator() {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator>
<Tab.Screen name={NavigatorKeys.tab} component={test} />
</Tab.Navigator>
);
}
export default TabNavigator;
and this is the usage:
<Stack.Navigator screenOptions={headerWithAnimationOptions} initialRouteName={NavigatorKeys.tab}>
<Stack.Screen name={NavigatorKeys.tab} component={TabNavigator} />
<Stack.Screen name={ScreenKeys.dashboard} component={Dashboard} options={dashboardOptions} />
<Stack.Screen name={ScreenKeys.noticeBoard} component={NoticeBoard} options={noticeBoardOptions} />
</Stack.Navigator>
do you have any idea what the problem might be? Thanks
I have a screen in my app (CameraScreen) that is both in my Tab Navigator and Stack Navigator shown below (there are some more Tab Screens and Stack Screens that I removed for simplicity):
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen
name="Camera"
component={CameraScreen}
/>
</Tab.Navigator>
);
};
const Navigation = () => {
return (
<NavigationContainer theme={Theme}>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Camera" component={TabNavigator} />
<Stack.Screen name="Product" component={ProductScreen} />
<Stack.Screen name="CameraStack" component={CameraScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
Now if I navigate to ProductScreen, then navigate to CameraStack from there and check the navigation state I notice that ProductScreen is nowhere to be found in the routes which I checked using navigation.getState().routes. Thus if I try and use navigation.goBack() it does not go back to the ProductScreen (which would be the expected behaviour).
When I check the routes in ProductScreen, ProductScreen shows up as the last route, however this disappears when I navigate to CameraStack.
I have a hunch that this has to do with the fact that CameraScreen is in both the Tab Navigator and Stack Navigator so for some reason the navigation prop passed to Camera is the Tab Navigator.
For reference my CameraScreen (simplified):
const CameraScreen = ({ navigation, route }) => {
// this doesn't include ProductScreen even if I navigate to CameraStack from the ProductScreen
console.log(navigation.getState().routes);
return (
<View></View>
);
};
and ProductScreen (simplified):
const ProductScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity
onPress={() => navigation.navigate("CameraStack")}
>
</TouchableOpacity>
</View>
);
};
One idea I can think of to resolve this issue is to manually pass a navigation parameter from ProductScreen but I'm wondering if there is a better way to handle this issue.
I realized this had nothing to do with the fact that I had this screen in both the Tab Navigator and Stack Navigator but was occurring because I was navigating to the same screen using navigation.navigate instead of navigation.push.
The former navigates to the previous location in your stack if you navigate to a screen you've already visited before, but the latter pushes a new route to the navigation state even if it's a screen you've already visited.
Handle backBehavior prop in your Navigator
<Tab.Navigator backBehavior='history'>
<Screen ... />
<Screen ... />
<Tab.Navigator/>
https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior
my screens are arranged this way:
main root
Stack navigator has 2 screens
Login
Drawer
The drawer is a Drawer Navigator, having three screens
Home
Profile
Settings
Home is a Bottom Tab Navigator having multiple Screens like
Dashboard
Reminder
etc ...
So the issue is whenever I am in any sub-screen of let's say reminder and I want to close it by navigation.goBack() it takes me to Dashboard, what I want is to land back on reminder
PS. the sub screen is also in the tab navigator I have hidden it with filter
Read the following code and try it, don't forget to import it.
The way I've done it is putting the drawer above in the file
DrawerNavigator.js:
const Drawer = createDrawerNavigator()
const DrawerNavigator = () => {
return(
<Drawer.Navigator initialRouteName='TabNavigator'>
<Drawer.Screen name='Home' component={TabNavigator}/>
<Drawer.Screen name='Profile' component={ProfileStackScreen}/>
<Drawer.Screen name='Settings' component={SettingsStackScreen}/>
</Drawer.Navigator>
)
}
export default DrawerNavigator
Here I insert the TabNavigator(Only one of the options in the Drawer will have te bottom tab navigator, the Home one.
The TabNavigator.js will have all the bottom tab screens:
const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<Tab.Navigator initialRouteName='Dashboard'>
<Tab.Screen name="Dashboard" component={DashboarStackScreen} />
<Tab.Screen name='Reminder' component={ReminderStackScreen}/>
</Tab.Navigator>
)
}
export default BottomTabNavigator
In the StackNavigator.js you will enter every stack screens you might want to use:
const Stack = createStackNavigator()
const DashboardStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ReminderStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ProfileStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const SettingsStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
export {DashboardStackScreen,ReminderStackScreen,ProfileStackScreen,SettingsStackScreen}
If this doesn't solve your problem, let me know.
You can use a StackNavigator for each tab of the BottomTabNavigator, which contains the screens for that tab. Every tab will then have its own navigation stack.
I am setting the theme of my Navigation Container like this
import {
NavigationContainer,
DefaultTheme,
DarkTheme,
} from "#react-navigation/native";
export default function Navigation() {
const colorScheme = useColorScheme();
return (
<NavigationContainer
linking={LinkingConfiguration}
theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<RootNavigator />
</NavigationContainer>
);
}
I have a stack navigator, and inside the stack navigator i have a drawer navigator, like this:
// Root Navigator
export default function RootNavigator() {
return (
<Stack.Navigator id="root-navigation-navigator" initialRouteName={initialRouteName}>
<Stack.Screen
name="Root"
component={DrawerNavigator}
options={{
headerShown: false,
}}
/>
{/* Other Screens */}
</Stack.Navigator>
);
}
// Drawer Navigator
export default function DrawerNavigator(props) {
return (
<Drawer.Navigator
initialRouteName="UserSettings"
drawerContent={(props) => <CustomDrawerContent {...props} me={me} />}
>
{/* Some Screens */}
</Drawer.Navigator>
}
The Drawer Toggle Button
In default browser theme it looks like this:
In dark theme it looks like this:
How can I get the toggle button to contract the black of dark theme?!
Thanks in advance.
I've been experimenting in React Native and have noticed the expo init command now brings in a newer base codebase to start from. The issue I'm having is related the header not hiding when we use the headerShown prop in the options of the navigator component.
import * as React from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";
const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = "Home";
export default function BottomTabNavigator({ navigation, route }) {
// navigation.setOptions({
// headerShown: false
// });
return (
<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
<BottomTab.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false,
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-code-working" />
)
}}
/>
<BottomTab.Screen
name="Links"
component={LinksScreen}
options={{
headerShown: false,
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-book" />
)
}}
/>
</BottomTab.Navigator>
);
}
The code above is the different methods I've tried to apply the header shown. I have also tried doing it the older way by creating the static method for navigation options in each of the page components. Neither seems to work, and what's annoying is the docs have suggested applying it to the navigator is the way to use it in this version of react-navigation.
The Home page component looks like so:
export default function HomeScreen() {
return <View style={styles.container}></View>;
}
HomeScreen.navigationOptions = {
headerShown: false
};
And the Links page looks almost identical minus the render function.
For All Screen on this Stack
<LoggedStack.Navigator
screenOptions={{ headerShown: false}} >
<LoggedStack.Screen name='Dash' component={MyDrawer} />
<LoggedStack.Screen name="Login" component={Login} />
</LoggedStack.Navigator>
For Specific Screen
<Drawer.Screen name="Dept" component={DepartMentScreen} options={{ headerShown: false}} />
So as it turns out the new base code creates a stack navigator that references the screen with the bottom tab navigator applying the header shown prop to the stack navigator disabled the headers on the pages
<Stack.Navigator screenOptions={{ headerShown: false }}>