App.js
const App = () => {
return (
<NavigationContainer>
<Tabs />
</NavigationContainer>
);
};
Tabs.js
const Tabs = () => {
return (
<Tab.Navigator initialRouteName='Team' screenOptions={{tabBarShowLabel: false, headerShown: false}} >
<Tab.Screen
name="Home" component={Main}
options={{
tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Main')} />),
// tabBarIcon
}}
/>
<Tab.Screen
name="Team" component={Team}
options={{
tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Team')} />),
}}
/>
</Tab.Navigator>
);
}
Home.js
const Home = ({navigation}) => {
return (
<Stack.Navigator initialRouteName="Schedule">
<Stack.Screen name="Main" component={Main}
options={{
title: 'Main',
headerShown: false
}}
/>
<Stack.Screen name="Team" component={Team}
options={{
title: 'Team',
headerShown: false
}}
/>
</Stack.Navigator>
);
};
This is what I did. The screens with Main and Team.
I'm unable to navigate through these screens.
What is the issue with this implementation? And please help me to navigate through screens.!
Your first tabBarButton tries to navigate to Main but the name you're using for the tab route is Home.
I'm assuming you intended to use the Home component in the first tab instead of the Main component.
I tried to create this snack with a working example: https://snack.expo.dev/9a0DOgzoB
Please do not use the same route name for multiple routes. You're using Team multiple times.
Related
Currently i do have this config in react-navigation:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
<Stack.Group
screenOptions={{
contentStyle: { marginTop: 120 },
gestureEnabled: true,
// presentation: 'modal',
gestureDirection: 'horizontal',
}}
>
<Stack.Screen component={CollectiblesInfoScreen} name={Routes.COLLECTIBLE_INFO_SCREEN} />
</Stack.Group>
</Stack.Navigator>
but for some reason when i try to swipe down nothing happens, modals do not close. Currently this is how it looks like the component CollectiblesInfoScreen
import { Box, Text } from 'native-base';
export const CollectiblesInfoScreen = () => {
return (
<Box>
<Text>Test</Text>
</Box>
);
};
Any ideas about what might be the issue?
I am implementing material top tabs and want to keep the user singed in if the user signs in to the application. The concept is working but after working for 6-7 times, the screen transitions are wrong. The user sees the previous user's details after logout and relogin.
function TabNavigation() { return (
<Tab.Navigator
tabBarOptions={{
labelStyle: { fontSize: 12 }
}} style={{ marginTop: Constants.statusBarHeight }}>
<Tab.Screen name="Login" component={Login} options={{ title: 'Login' }} onPress={retrieveData} initialParams={{ fcmToken: `${fcmTokenSAve}` }}/>
<Tab.Screen name="Sign Up" component={SignUp} options={{ title: 'Sign Up' }}/>
</Tab.Navigator> ); }
const Stack = createStackNavigator();
function HomeStack() { return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} initialParams={{
url: Platform.OS === 'android' ? `${API_LIVE_URL}/Account?version=${appVersion}` : `${API_LIVE_URL}/AccountIos?version=${appVersion}`}} options={{headerShown: false}}/>
<Stack.Screen name="Authentication" component={TabNavigation} options={{headerShown: false}}/>
<Stack.Screen name="Forgot Password" component={ForgotPassword} />
<Stack.Screen name="OTP" component={OTP} options={{headerLeft: ()=> null}}/>
</Stack.Navigator> );}
export default function App() { if (!isLoadingComplete ) {
return (
<AppLoading
startAsync={retrieveData}
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
); }else{
return (
<NavigationContainer>
<NotificationController />
{console.log('LoggedIn App',Logged), Logged ? (
<HomeStack />
) : (
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Authentication" component={TabNavigation} options={{headerShown: false}}/>
<Stack.Screen name="Forgot Password" component={ForgotPassword} />
<Stack.Screen name="OTP" component={OTP} options={{headerLeft: ()=> null}}/>
<Stack.Screen name="Home" component={Home} options={{headerShown: false}}/>
</Stack.Navigator>
)}
</NavigationContainer>
);
}}
And when we logout, we want to redirect back to login screen otherwise whenever app launches, remain to home screen.
navigation.canGoBack() ? (
navigation.navigate('Authentication')
) : navigation.navigate('Authentication')
i've been trying to hide tabBar in specific screens, tried out some solutions found but none worked for me(Using Native-Base) for UI.
I have a TabNavigator in which i pass a Stack with screens.
So what i'm trying to do is to hide the TabBar in one of those screens.
See my code below 👇.
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {createStackNavigator} from '#react-navigation/stack';
import { NativeBaseProvider } from 'native-base';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
//Stack of Screens linked with the search Menu.
function Recherche() {
return (
<Stack.Navigator initialRouteName="Recherche">
<Stack.Screen
name="Recherche"
component={Search}
options={{title: 'Recherche', headerShown: false}}
/>
<Stack.Screen
name="ViewCarte"
component={ViewCarte}
options={{title: 'ViewCarte', headerShown: false}}
/>
</Stack.Navigator>
);
}
//Stack of Screens linked with the Mon Espace Menu.
function MonEspace() {
return (
<Stack.Navigator initialRouteName="Espace">
<Stack.Screen
name="Espace"
component={Espace}
options={{title: 'Espace', headerShown: false}}
/>
<Stack.Screen
name="Compte"
component={Compte}
options={{title: 'Compte', headerShown: false}}
/>
</Stack.Navigator>
);
}
//Function constructing the TabBar
function ViewLoc({navigation}) {
return (
<NativeBaseProvider>
<Tab.Navigator
initialRouteName="Recherche"
tabBarOptions={{
activeTintColor: '#0B3D91',
style: {
padding: 5,
height: 60,
},
tabStyle: {
paddingTop: 8,
paddingBottom: 8,
},
}}>
<Tab.Screen
name="Recherche"
component={Recherche}
options={{
tabBarIcon: ({color, size}) => (
<SearchIcon color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Mon espace"
component={MonEspace}
options={{
tabBarIcon: ({color, size}) => <ProfileIcon color={color} />,
tabBarVisible: true,
}}
/>
</Tab.Navigator>
</NativeBaseProvider>
);
}
Trying to hide tabBar in screen "ViewCarte" and screen "Compte".
you can change navigation structure, your structure should be like this
const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function TabsNavigatorComponent() {
return (
<Tab.Navigator>
//any screen or stack here will show with tabs.
</Tab.Navigator>
)
}
<NavigationContainer>
//the main Navigator shoud be Stack
<RootStack.Navigator>
//outside any screen to here, to show it without tabs.
<RootStack.Screen name="screenWithoutTabs" component={ScreenWithoutTabs}/>
<RootStack.Screen name="bottomTabs" component={TabsNavigatorComponent}/>
</RootStack.Navigator>
</NavigationContainer>
I have total 6 screens, however I only want to put 4 screens(Tutorial, File Upload, Details Search, and Profile) in the bottom tab navigation below the screen. I use " tabBarLabel: () => null " to hide label for login and register screens.
My bottom tab now has 4 labels, but only the label has disappeared and still occupies that place.
enter image description here
const Tabs = createBottomTabNavigator();
const Stack = createStackNavigator();
const FileUploadStack = ({route, navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="File Upload" component={FileUpload} initialParams={{ itemId: 42 }} options={{
title:''}} />
</Stack.Navigator>
);
const DetailsSearchStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Details Search" component={DetailsSearch} options={{
title:''}} />
</Stack.Navigator>
);
const LoginStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Login" component={Login} options={{
title:''}} />
</Stack.Navigator>
);
const RegisterStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Register" component={Register} options={{
title:'' }} />
</Stack.Navigator>
);
const TutorialStack = ({navigation}) => (
<ThemeContextProvider>
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Tutorial" component={Tutorial} options={{
title:'' }} />
</Stack.Navigator>
</ThemeContextProvider>
);
export default function App() {
const [value1, setValue1] = useState("");
const [value2, setValue2] = useState("");
return (
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name = "Tutorial" component={Tutorial} options={{ tabBarVisible: false, header: null}}/>
<Tabs.Screen name= "Login" component={Login} options={{ tabBarVisible: false, tabBarLabel: () => null}}/>
<Tabs.Screen name= "Register" component={Register} options={{ tabBarVisible: false,tabBarLabel: () => null }}/>
<Tabs.Screen name= "File Upload" component={FileUpload} />
<Tabs.Screen name= "Details Search" component={DetailsSearch} />
<Tabs.Screen name = "Profile" component={User} option={{ tabBarLabel: 'Profile',
tabBarIcon: ({ color }) => ( <View>
<Icon name={"ios-person"} color={color} size={25}/> </View>)}}/>
</Tabs.Navigator>
{/* <Stack.Navigator initialRouteName="Tutorial">
<Stack.Screen name="Tutorial" component={Tutorial} options={{ headerShown: false }}/>
<Stack.Screen name="Login" component={Login}/>
<Stack.Screen name="Register" component={Register}/>
<Stack.Screen name="File Upload" component={FileUpload} />
<Stack.Screen name="Details Search" component={DetailsSearch}/>
</Stack.Navigator> */}
{/* <FlatList
data={data}
renderItem={({ item }) => (
<Text>{item.field1}, {item.field2}</Text>
)}
/> */}
<StatusBar style="auto" />
</NavigationContainer>
);
}
You will have to return null for the tabBarButton like below, this will hide the whole button from the tabbar
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarButton: () => null,
}}
/>
I am new to react native development, but i have some requirement with react navigation drawer. I want to display the navigation drawer from top of the screen but it is display below from toolbar. It is a combination of both Stack and Drawer screens. Following is my code in App.js
function App() {
SplashScreen.hide()
return (
<NavigationContainer>
{/* headerMode='float' */}
<Stack.Navigator initialRouteName='Login' >
<Stack.Screen name="Login" component={LoginScreen}
options={{ headerShown: false }} />
{/* <Stack.Screen name="Home" component={HomeScreen} /> */}
<Stack.Screen name="DrawerScreens" component={DrawerScreens}
options={({ navigation, route }) => ({
title: "Home",
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'},
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} />
<Stack.Screen name="Dashboard" component={Dashboard}
options={({ route }) => ({headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'}})} />
</Stack.Navigator>
</NavigationContainer>
DrawerScreens function is like following..
function DrawerScreens({ route, navigation }) {
// console.log("param:"+route.params.token)
return (
//drawerContent={props=>CustomDrawerContent(props)}
// <SafeAreaProvider>
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="float" >
{/* <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}> */}
{/* options={{ drawerLabel: 'Updates' }} */}
<Drawer.Screen name="LandingScreen" component={LandingScreen}
initialParams={{ token: route.params.token }}/>
);
}
CustomDrawer function contains list of the menu items which is dynamic and NestedMenuView is taking care of that..
function CustomDrawerContent(props) {
return (
<SafeAreaView style={{flex: 1}} forceInset={{ top: "always" }}>
<NestedMenuView navObj={props.navigation} />
</SafeAreaView>
);
};
For me the combination of both stack and drawer screens.Thanks in advance.
I don't think the problem lies around the Stack Navigator or the Screen components;
If you use the latest, after v5 release version of #react-navigation/drawer (mine is 5.6.3) the recommended way is to use the built-in wrappers when creating custom drawer
const Drawer = createDrawerNavigator();
const Menu = (props) => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Help" onPress={() => {}} />
</DrawerContentScrollView>
);
};
export default function MyDrawer() {
return (
<Drawer.Navigator
initialRouteName="Tabs"
drawerContent={(props) => <Menu {...props} />}
edgeWidth={100}
drawerContentOptions={{
activeTintColor: Colors.accentColor,
labelStyle: {
fontFamily: 'open-sans',
},
}}
>
<Drawer.Screen...
</Drawer.Navigator>
);
You can also leave the scrollview and create custom ui like this:
const contentOptions = {
activeBackgroundColor: '#dbdbdb',
activeLabelStyle: {
fontSize: 16,
color: 'black',
fontFamily: 'roboto'
},
labelStyle: {
fontSize: 16,
fontWeight: 'normal',
color: intenseGrey,
fontFamily: 'roboto'
}
};
return (
<View
style={{
display: 'flex',
flexDirection: 'column',
flexGrow: 1
}}
>
<SafeAreaView style={{ flex: 1, paddingBottom: 0 }}>
<View style={{
backgroundColor: '#dbdbdb',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
flexGrow: 1}}
>
<View>
<DrawerItemList {...props} {...contentOptions} />
</View>
</View>
</SafeAreaView>
</View>
);
I think the reason that Drawer is not covering is because you put the Drawer navigation inside your Stack navigation.
Yours
Stack
Drawer
To fixed that you have to readjust the order
Drawer
Stack
For example (or you could see from my snack here: https://snack.expo.io/#gie3d/d25aca)
const HomeStack = () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={({navigation}) => ({
title: "Home",
headerLeft: () => (
<Ionicons
name={'md-menu'}
size={24}
style={{ marginLeft: 10 }}
onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())
}
/>
),
})} />
</Stack.Navigator>
);
const Home = () => {
return (
<View>
<Text>This is Home</Text>
</View>
)}
export default () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="HomeStack">
<Drawer.Screen name="HomeStack" component={HomeStack} />
<Drawer.Screen name="HomeNoStack" component={Home} />
</Drawer.Navigator>
</NavigationContainer>
);
}
The following stacks created and calling these stacks from Drawer Screens.
const LandingStack = ({ route, navigation }) => (
<Stack.Navigator>
<Stack.Screen name="LandingScreen" component={LandingScreen} options={({navigation}) => ({
headerTitle: 'Home',
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} />
</Stack.Navigator>
);
const TicketingStack = () => (
<Stack.Navigator>
<Stack.Screen name="TicketingDashboard" component={TicketingDashboard} options={({route, navigation}) => ({
headerTitle: route.params.type,
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} />
</Stack.Navigator>
);
function DrawerScreens({ route, navigation }) {
// console.log("param:"+route.params.token)
return (
//drawerContent={props=>CustomDrawerContent(props)}
<SafeAreaProvider>
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="screen">
{/* options={{ drawerLabel: 'Updates' }} */}
{/* <Stack.Screen name="DrawerScreens" component={DrawerScreens}
options={({ navigation, route }) => ({
title: "Home",
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} /> */}
<Drawer.Screen name="LandingStack" component={LandingStack}
initialParams={{ token: route.params.token }}/>
<Drawer.Screen name="HomeStack" component={HomeStack}
initialParams={{ token: route.params.token }} />
</Drawer.Navigator>
</SafeAreaProvider>
);
}
And I have removed header part from the function App and finally looks like this in the App.js
<Stack.Screen name="DrawerScreens" component={DrawerScreens}
options={{ headerShown: false }} />