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
Related
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
I am new in react native and I don't understand why it is not working
In my main file App.js , I need to have a button to go to another screen( AddList.js)
So, In app.js , I have
function App (navigation) {
const onPressHandler = () => {
navigation.navigate('AddList')
}
return (
<Pressable onPress={onPressHandler}>}
function addList(navigation) {
const onPressHandler = () => {
navigation.goBack();
}
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={App}
/>
<Stack.Screen
name="FavProducts"
component={FavProducts}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
There are in the same file App.js
Sorry for the question and thanks to your help
I have try with reactnative doc , but not working
If you are using #react-navigation/native then first you need to create container to handle the component state and then you have to create stack
in side the stack you need to define your screens like this.
import React from 'react';
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import AddList from './components/screens/AddList';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
component={AddList}
name="AddList"
options={{ headerShown: false }}
/>
// define your screens as well
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
and if you have to move from one screen to another then import in your js file where you have to create the click event
import { useNavigation } from '#react-navigation/native';
const navigation = useNavigation();
and on button press
navigation.navigate('AddList')
This is the app.js file, which has no error in it. But when AbcdPage is being imported from AbcdPage.js file the entire simulator & emulator goes entirely white. Nothing is being displayed also terminal in vscode doesn't show any error or warnings.
import React, { Component } from 'react';
import AbcdPage from "./components/AbcdPage"
export default class App extends Component {
render() {
return (
<View>
<AbcdPage />
</View>
);
}
}
Here goes AbcdPage.js file, all imports are done correctly in this AbcdPage.js file.
const Drawer = createDrawerNavigator();
export default function AbcdPage(props) {
return (
<NavigationContainer>
<Drawer.Navigator
drawerPosition="right"
drawerContent={(props) => <DrawerContent {...props} />}
>
<Drawer.Screen name="HomeDrawer" component={Screen1} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Thanks in advance for your help.
Try to add to your View component style flex:1
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>
);
}
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 }}>