React Native bottom bar change background color when screen is focused - react-native

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

Related

How to create a DrawerItem between DrawerScreens in a DrawerNavigator

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?

Why my navbar backgorund color is not changed?

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>

Problem with React Navigation Bottom Tabs and Stack

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

Does a bottom tab need its own separate stack

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 to apply tabBarColor in react-native?

someone know why it doesn't apply the color i can't see the error :
enter image description here
i already change the color close and rebuild the project but still don't working
this is the code :
<Tab.Navigator
initialRouteName="Home"
activeColor="#23233c"
>
<Tab.Screen
name="Profile"
component={PacienteStackProfile}
options={{
tabBarLabel: 'Profile',
tabBarColor: '#61d27c',
tabBarIcon: ({color}) => (
<Icon name="ios-person" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
Pass tabBarOptions object to your TabNavigator
<Tab.Navigator
tabBarOptions={{ // add properties here
activeTintColor: '#23233c',
inactiveTintColor: '#424242',
style: { backgroundColor: '#61d27c' },
}}>
<Tab.Screen
name="Profile"
component={PacienteStackProfile}
options={{
tabBarLabel: 'Profile',
tabBarColor: '#61d27c',
tabBarIcon: ({color}) => (
<Icon name="ios-person" color={color} size={26} />
),
}}
/>
</Tab.Navigator>