When I am trying to adding bottom tab navigation then I just got stack tab upper the search components, can you help me to hide or erase it?
Here's my code, and it shows up like this.
const Tab = createBottomTabNavigator();
const Settings = () => (
<SafeArea>
<Text>Settings</Text>
</SafeArea>
);
const Maps = () => (
<SafeArea>
<Text>Maps G</Text>
</SafeArea>
);
import {
useFonts as useOswald,
Oswald_400Regular,
} from "#expo-google-fonts/oswald";
import { useFonts as useLato, Lato_400Regular } from "#expo-google-fonts/lato";
export default function App() {
const [oswaldLoaded] = useOswald({
Oswald_400Regular,
});
const [latoLoaded] = useLato({
Lato_400Regular,
});
if (!oswaldLoaded || !latoLoaded) {
return null;
}
return (
<>
<ThemeProvider theme={theme}>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Restaurant" component={RestaurantScreen} />
<Tab.Screen name="Maps" component={Maps} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
</ThemeProvider>
<ExpoStatusBar style={"auto"} />
</>
);
}
Here is my image for the bottom tab navigation ->
show up
You are having a header in the screen as part of BottomTabNavigation.
adding screenOption Like below will solve this
<Tab.Navigator screenOptions={{headerShown: false}} >
<Tab.Screen name="Restaurant" component={RestaurantScreen} />
<Tab.Screen name="Maps" component={Maps} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
You can hide the header with headerShown: false for a single route
<Stack.Navigator
initialRouteName="Settings"
screenOptions={{
headerShown: false, // hide header
}}>
Take a look at my sample
Or for the tab navigator with:
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
headerShown: false,
}}>
Related
I have my App stack with Tab navigation and I want to add some more screens to my settings page below is my App.js page how can I do it
App.js
I need to add to make a SettingsStack for this below page
Settings.js
Create a function (for eg: 'TabNavigation') which returns tab navigator component then try putting tab navigator inside stack like below example
import Profile from '../screens/settings/Profile';
import ManageRooms from '../screens/settings/ManageRooms';
....
const TabNavigation = () => {
<Tab.Navigator
.....
</<Tab.Navigator>
}
....
<NavigationContainer>
{authState.isAuthenticated ? (
<Stack.Navigator
initialRouteName="Tabs"
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Tabs" component={TabNavigation} />
<Stack.Screen
key={'Profile'}
name={'Profile'}
component={Profile}
/>
<Stack.Screen
key={'ManageRooms'}
name={'ManageRooms'}
component={ManageRooms}
/>
</Stack.Navigator>) : (
<Stack.Navigator
screenOptions={{
header: () => {},
}}>
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="SignUp" component={SignUp} />
</Stack.Navigator>
)}
</NavigationContainer>
....
I am new to the world of react native, so I need a hand with structuring my navigation pages. I want my app to have instagram like structure - that is the main page should be createBottomTabNavigator From there I have few different pages, and I can switch between them easily. Here is my code:
export default const MyTabs = ({ currentUser, navigation }) => {
return (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Network"
component={NetworkScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Entypo name="map" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};
Then in my App.js file I call it like this:
return (
<Provider store={store}>
<NavigationContainer>
<MyTabs />
</NavigationContainer>
</Provider>
);
The above code works fine. The problem is when I want to perform more complicated navigation. For instance, in my home page I have list of objects and once, I click on these objects I want to navigate to a new page - with Stack navigator. How do I do so, and where should I define this page? Do I define it somehow inside my Home page, or inside my App.js page? In my mind it should be something like this:
<Stack.Screen
name="Details"
component={DetailScreen}
/>
I tried to put it inside App.js, something like this:
<Provider store={store}>
<NavigationContainer>
<MyTabs />
<Stack.Navigator>
<Stack.Screen
name="Meetup Details"
component={MeetupDetails}
options={{
headerTitle: "Meetup Details",
}}
/>
</Stack.Navigator>
</NavigationContainer>
</Provider>;
But ofc it didn't work.
Also I have another question - in my bottom tab I can navigate to My profile screen and that works fine. But I want to view other profiles as well. So my bottom tab is reserved for my own profile, but how do I define another Profile screen, which can go to other user's profile? Does it need to be with stack navigator? Does it again need to be defined in App.js? Is it ok to define two different navigators (bottom tab and stack) with the same page (Profile)?
Usually, when you have a bottom tab navigator, each tab will be a StackNavigator
export default const MyTabs = ({ currentUser, navigation }) => {
return (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home" // here this would be BottomTabRoutes.HOME
component={HomeNavigator}
/>
<Tab.Screen
name="Network" // here this would be BottomTabRoutes.NETWORK
component={NetworkNavigator}
/>
<Tab.Screen
name="Profile" // here this would be BottomTabRoutes.PROFILE
component={ProfileNavigator}
options={{
tabBarIcon: ({ color, size }) => (
<Entypo name="map" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};
And then your MeetupDetails screen will be contained inside the HomeNavigator which is a StackNavigator
export const HomeNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
...
}}>
<Stack.Screen
name={HomeRoutes.HOME}
component={Home}
options={{
headerStyle: styles.header,
title: 'Home'
}}
/>
<Stack.Screen
name={HomeRoutes.MEETUP_DETAILS}
component={MeetupDetails}
options={{
headerStyle: styles.header,
title: 'Meetup Details'
}}
/>
</Stack.Navigator>
}
Also, I would suggest to store your routes names in an enum, in this way it will be easier and their possible route props in a tpye
Something like this:
export enum BottomTabRoutes {
HOME = 'Home',
NETWORK = 'Network',
PROFILE = 'Profile',
}
export type BottomTabRouteProps = {
[BottomTabRoutes.HOME]: {title: string}; // this is another parameter example
[BottomTabRoutes.PROFILE]: undefined;
[BottomTabRoutes.NETWORK]: undefined;
};
And the same for each Stack Navigator:
export enum HomeRoutes = {
HOME = 'Home',
MEETUP_DETAILS = 'Meetup Details',
}
export type HomeRouteProps = {
[HomeRoutes.HOME]: undefined
[HomeRoutes.MEETUP_DETAILS: { someParamName: SomeType } // this might be a parameter you'll send through navigation
}
// Therefore, your MeetupDetails screen will look something like this:
export const MeetupDetails = (props: StackScreenProps<HomeRouteProps, HomeRouteProps.MEETUP_DETAILS>,) => {
const navigationParam = props.route.params.someParamName
return (
<View>
...
</View>
)
}
EDIT
Regarding the Profile Screen, I believe you can have something like this:
export const MainNavigator = () => {
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name={MainNavigatorRoutes.HOME} component={HomeNavigator} />
<Stack.Screen name={MainNavigatorRoutes.USER} component={UserNavigator} />
</Stack.Navigator>
);
};
export const UserNavigator = () => {
return (
<Stack.Navigator
screenOptions={({navigation}) => ({
...)}>
<Stack.Screen
name={UserNavigatorRoutes.SOME_OTHER_SCREEN}
component={UserSettings}
/>
<Stack.Screen
name={UserNavigatorRoutes.USER_PROFILE}
component={UserProfile}
/>
</Stack.Navigator>
);
};
export const HomeNavigator = () => {
return (
<Stack.Navigator screenOptions={{title: ''}} >
<Stack.Screen
name={HomeNavigatorRoutes.HOME_TABS}
component={HomeTabNavigator}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
};
export const HomeTabNavigator = () => (
<Stack.Navigator >
<Stack.Screen
name={HomeTabNavigatorRoutes.TAB_NAVIGATOR}
component={MyTabs}
options={{headerShown: false}}
/>
</Stack.Navigator>
Basically, the structure will look like this: MainNavigator = { HomeNavigator, UserNavigator }. In this way, each navigator will be separate and you should be able to navigate to any screen from UserNavigator even if you are in a screen from UserNavigator
I've currently built, this navigation system but I feel like i've got it a bit wrong as in the order of things. I'm slowly developing issues such as not being able to hide the drawer navigator on certain screens of the tav navigator and etc..
Would someone be able to help me organise the navigation so that it makes a bit more sense?
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createMaterialTopTabNavigator();
const SwipeTabNavigator = () => {
return (
<Tab.Navigator
sceneContainerStyle={{
backgroundColor: theme['primaryColor'],
}}
tabBarOptions={{
style: {
display: 'none',
backgroundColor: '#08457e',
},
}}>
<Tab.Screen name="Component1" component={Component1} />
<Tab.Screen name="Component2" component={Component2} />
<Tab.Screen name="Component3" component={Component3} />
</Tab.Navigator>
);
};
const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: {backgroundColor: theme['primaryColor']},
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="SwipeTabNavigator" component={SwipeTabNavigator} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
const App = () => {
return (
<Root>
<NavigationContainer>
<Drawer.Navigator
screenOptions={{swipeEnabled: false}}
drawerContent={(props) => <SidebarComponent {...props} />}
initialRouteName="Login">
<Drawer.Screen name="List" component={MainStackNavigator} />
</Drawer.Navigator>
</NavigationContainer>
</Root>
);
};
export default App;
After user logs in the navigation navigates to "SwipeTabNavigator", and I would like the drawer to be available at each screen :/
Any refactor help would be a blessing, thank you!
My goal is to have both Top and Bottom navigation bar for Home, Dashboard, and Album, but not for the SignIn. Here's the catch, I wish to put the button on the bottom instead of on the top.
The last remaining puzzle is how to add a Sign In button to the Bottom Navigation Bar.
The roadblock is if you write <Tab.Screen name="Sign In component={SignIn} /> and you press a button with parameter onPress={() => navigation.navigate('SignIn')}, it will navigate you to the Tab.Screen instead of Stack.Screen.
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Dashboard" component={Dashboard} />
<Tab.Screen name="Album" component={Album} />
</Tab.Navigator>
);
}
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen options={{title: ''}} name="MyTabs" component={MyTabs} />
<Stack.Screen name="SignIn" component={SignIn} />
</Stack.Navigator>
);
}
export default function App() {
return (
<Provider store={store}>
<NavigationContainer>
<MyStack />
</NavigationContainer>
</Provider>
);
}
You can use the tabbarbutton like below. This would pass the props and render a the touchableopacity and you can have your own onPress.
You can navigate, here i have given an alert
<Tab.Screen name="Settings"
options={({navigation})=> ({
tabBarButton:props => <TouchableOpacity {...props} onPress={()=>navigation.navigate('SignIn')}/>
})}/>
Trying to update my app to react navigation 5 and been confronting some issues.
First of all, the header does not show up. Snips from the code:
[from App.js]
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator >
<Tab.Screen name="Home" component={HomeScreen} options={{ title:'some title' }}/>
<Tab.Screen name="Upload" component={UploadScreen} />
<Tab.Screen name="Find" component={FindScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
and the style of the current screen:
<View style={{flex:1, flexDirection:'column',justifyContent:'space-between'}}>
Here is a screenshot of the app on an Android emulator (and it looks the same on my phone):
As you can see, the header is not shown, the tab navgiation does not right, and so are the buttons (something changed about their background). I did not change anything in the app besides upgrading to react-navigation 5..
Thanks for the help!
Tab navigators do not have header support. You have to wrap your tab navigator inside a stack navigator.
import { createStackNavigator } from "#react-navigation/stack";
// ... other imports
export const App = () => {
return (
<NavigationContainer>
<StackNavigator />
</NavigationContainer>
);
}
const Stack = createStackNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Tabs" component={TabNavigator} />
</Stack.Navigator>
);
}
const Tab = createTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator >
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Upload" component={UploadScreen} />
<Tab.Screen name="Find" component={FindScreen} />
</Tab.Navigator>
);
}