Hey lets suppose we got the following:
<Drawer.Navigator
initialRouteName="Home"
drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="B"/>
</DrawerContentScrollView>
)}
}>
<Drawer.Screen options={{
drawerLabel: 'A',
title: ''
}} name="Home" component={HomeScreen} />
<Drawer.Screen options={{
drawerLabel: 'C',
title: ''
}} name="Login" component={LoginScreen} />
</Drawer.Navigator>
As you can see I got a DrawerItem labeled B that I want to be between the screens labeled A and C, is there a solution for this?
Related
I am kinda new to React Native, and I try to change the background color of my navbar as wel as the color of the name that's selected. Why this all does not work and what can I do to make it work?
<NavigationContainer>
<Tab.Navigator
screenOptions={{
tabBarOptions: {
style: {
backgroundColor: 'red',
},
},
}}
>
<Tab.Screen
name="My Family"
component={Family}
options={{
tabBarIcon: () => (
<Ionicons style={styles.icon} name="people-outline" />
),
}}
/>
<Tab.Screen
name="Edit Family"
component={EditFamily}
options={{
tabBarIcon: () => (
<Ionicons style={styles.icon} name="create-outline" />
),
}}
/>
<Tab.Screen
name="My Profile"
component={MyProfile}
options={{
tabBarIcon: () => (
<Ionicons style={styles.icon} name="person-outline" />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
I have 5 pages in bottomTab, and I want to navigate to others from these 5 pages. I looked at the docs in the official site of React navigation, wrote my code the same way, but it doesnt work.. I'm putting my code below, so you can have a look at it.
//This is my bottomTab
function Tabs(){
return(
<Tab.Navigator screenOptions={() => ({
tabBarActiveTintColor: '#fff',
tabBarInactiveTintColor: '#777',
headerTintColor:"#fff",
headerStyle:{
backgroundColor: '#000',
},
tabBarStyle: {
backgroundColor: '#000',
paddingBottom: 5,
paddingTop: 5,
},
})}>
<Tab.Screen
name='Historico' component={Historico}
options={{ tabBarIcon: ({ size, color }) => ( <AntDesign name='profile' size={size} color={color}/>)
}} />
<Tab.Screen
name='Relatorios'
component={Relatorios}
options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='areachart' size={size} color={color}/> )
}} />
<Tab.Screen
name='Plus'
component={Plus}
options={{
tabBarLabel: '',
tabBarIcon: ({ size, color }) => (<AntDesign name='plus' size = {28} color={color}/> ),
headerShown: false
}} />
<Tab.Screen
name='Lembretes'
component={ShowLembretes}
options={{
tabBarLabel: 'Lembretes',
tabBarIcon: ({ size, color }) => (<AntDesign name='clockcircleo' size={size} color={color}/>)
}} />
<Tab.Screen
name='Mais'
component={Mais}
options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='ellipsis1' size={size} color={color}/>)
}} />
</Tab.Navigator>
)
}
//These are my routes of my app, I put my `Tab` inside my `stack`
export default function Routes(){
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="Tabs"> //Its `Tabs` just for development
<Stack.Screen name= "Preload" component= {Preload} options={{ headerShown: false}}/>
<Stack.Screen name= "Tabs" component={Tabs} options={{ headerShown: false }}/>
<Stack.Screen name= "Despesa" component={Despesa} />
<Stack.Screen name= "Serviço" component={Serviço} />
<Stack.Screen name= "Receita" component={Receita} />
<Stack.Screen name= "AddLembrete" component={AddLembrete} />
<Stack.Screen name= "Abastecimento" component={Abastecimento} />
<Stack.Screen name= "Veiculos" component={Veiculos} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default function Plus({ navigation }){
return (
<TelaPlus style={estilos.tela}>
<View style={estilos.linha1}>//This is the way Im trying to navigate,is it wrong?
<Box onPress={()=> navigation.navigate('Despesa')}>
<MaterialCommunityIcons name="elevation-decline" size={24} color="white" />
<Texto>Despesa</Texto>
</Box>
<Box onPress={()=> navigation.navigate('Serviço')}>
<MaterialCommunityIcons name="car-wrench" size={24} color="white" />
<Texto>Serviço</Texto>
</Box>
<Box onPress={()=> navigation.navigate('Receita')}>
<MaterialCommunityIcons name="elevation-rise" size={24} color="white" />
<Texto>Receita</Texto>
</Box>
</View>
<View style={estilos.linha2} onPress={()=> navigation.navigate('Lembrete')}>
<Box style={estilos.box}>
<MaterialCommunityIcons name="clock-plus-outline" size={24} color="white" />
<Texto>Lembrete</Texto>
</Box>
<Box onPress={()=> navigation.navigate('Abastecimento')}>
<MaterialCommunityIcons name="gas-station" size={24} color="white" />
<Texto>Abastecimento</Texto>
</Box>
</View>
</TelaPlus>
)
};
Please, any help will be welcome! Thanks!
Sorry for my English, its not mt first language, still learning it too.
you can set tabLongPress act like tabPress
<BottomTab.Navigator
screenListeners={({ navigation }) => ({
tabLongPress: (e) => {
navigation.jumpTo(e.target.split('-')[0]);
},
})}
>
for more detail, check this link
When navigating to a screen from my second bottom tab(tab2), the app switches to tab1 and then navigates to the screen. When you click on the text to change screens, you can see the tab1 screen flash right before it swipes to the page.
How can I stay on the tab I am navigating from? I want to navigate to screen3 while keeping the tab on tab2.
Why is it changing tabs upon navigation?
To reproduce the bug... Click Tab2 -> click the text -> and you can see the bottom tab switch and the tab1 screen flashing before going to screen3.
Here is a snack code reproducing my project exactly along with my app.js below.
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Stack.Navigator
initialRouteName="Home">
<Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
<Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Tab1"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}
>
<Tab.Screen
name="Tab1"
component={MyTabs}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={Screen2}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const Stack = createStackNavigator();
In your demo code, navigating to screen1 shows the bottomTabBar at the bottom, is this your required use case or a bug. I am assuming that it is bug and you don't want that.
To achieve that , it is recommended to use screens first and then BottomTabs. So define your bottomTabs in screen1 then your existing code works as you want it.
your App should return
<NavigationContainer>
<Stack.Navigator
initialRouteName="Tabs">
<Stack.Screen name="Tabs" component= {MyTabs} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
<Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
</Stack.Navigator>
your MyTabs function should return
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={Screen2}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
Working snack code is here
Edit: for bottomTabs to be visible even after navigation, you should create another Stacknavigator as you did for Tab1.
your code should look something like this,
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen1"
component={Screen1}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen3"
component={Screen3}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
function MySecondTabs() {
return (
<Stack.Navigator initialRouteName="Screen2">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen1"
component={Screen1}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen3"
component={Screen3}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Tab1"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}>
<Tab.Screen
name="Tab1"
component={MyTabs}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={MySecondTabs}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
working snack code
How can I change the background color of tab bar item when the screen is focused. I am using react-navigation version 6.x. Here is my code snippet for the bottom bar
<NavigationContainer>
<Tab.Navigator
initialRouteName="Main"
activeColor={colors.yellow}
inactiveColor={colors.white}>
<Tab.Screen
name="Main"
component={Main}
options={{
tabBarIcon: ({color}) => (
<Icon name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Countries"
component={Countries}
options={{
tabBarIcon: ({color}) => (
<Icon name="ios-globe" color={color} size={26} />
),
}}
/>
<Tab.Screen name="GlobalCasesScreen" component={GlobalCasesScreen} />
</Tab.Navigator>
</NavigationContainer>
This is how you do that:
<Tab.Navigator
screenOptions={{
tabBarActiveBackgroundColor: "blue",
}}
>
You can replace "blue" with any color you want.
For more information about BottomTabNavigator, check this
Here is my error: undefined is not an object (evaluating 'navigation.navigate')
My goal is to navigate to my Settings page when on click on my LeftHeader component in my StackNavigator:
Here is a snippet of my App.js file:
const FeedStackNav = () => {
return (
<Stack.Navigator>
<Stack.Screen
options={{
title: "",
headerLeft: ({ navigation }) => (
<Header>
<LeftHeader onPress={() => navigation.navigate("Settings")}>
<MenuIcon fill={"#C13B1E"} />
</LeftHeader>
</Header>
),
}}
name="Feed"
component={Feed}
/>
</Stack.Navigator>
);
};
And here is how I am rendering the Stack in my app:
<NavigationContainer theme={theme}>
<Stack.Navigator>
<Stack.Screen
options={{
headerShown: false,
}}
name=" "
component={TabNav}
/>
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
There has to be something wrong with my LeftHeader onPress function
Am adding just snippet of code to illustrate how to use navigation.navigate('screen') on header button
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen
name="Home"
component={HomeScreen}
options={({navigation, route}) => ({
headerRight: () => (
<TouchableOpacity onPress={() => alert('Just clicked!!')}>
<FontIcon
onPress={() => navigation.navigate('CreateSession')}
name="video-camera"
color={whitish}
size={25}
/>
</TouchableOpacity>
),
})}
/>
<Stack.Screen name="CreateSession" component={CreateSessionScreen} />
<Stack.Screen name="LiveSessions" component={LiveSession} />
</Stack.Navigator>
</NavigationContainer>
on above code observe the callback function used to get access to navigation and route props
options={({navigation, route}) => ({
headerRight: () => (
<TouchableOpacity onPress={() => alert('Just clicked!!')}>
<FontIcon
onPress={() => navigation.navigate('CreateSession')}
name="video-camera"
color={whitish}
size={25}
/>
</TouchableOpacity>
),
})}