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>
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 am trying to figure out how to add some top and bottom padding around my bottom tabs navigator in my react native app. So far any changes I make have no effect. For instance, I tried adding padding: 20 to my style within screenOptions, but this made no difference.
This is my relevant code:
export const ClientScreen = (props) => {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: Colors.primary,
},
headerTintColor: Colors.light,
title: `${props.client?.firstName} ${props.client?.lastName}`,
tabBarActiveTintColor: Colors.light,
tabBarInactiveTintColor: Colors.lightInactive,
tabBarActiveBackgroundColor: Colors.primary,
tabBarInactiveBackgroundColor: Colors.primary,
headerLeft: () => (
<Feather
name='chevron-left'
size={24}
onPress={() => props.navigation.goBack()}
color={styles.colors.textInverse}
style={styles.layout.padding.horizontal}
/>
),
}}
initialRouteName={'Sessions'}
>
<Tab.Screen
name='Sessions'
component={SessionsTab}
initialParams={props}
options={{
tabBarLabel: 'SESSIONS',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Chart'
component={ChartTab}
initialParams={props}
options={{
tabBarLabel: 'CHARTS',
tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Goals'
component={GoalsTab}
initialParams={props}
options={{
tabBarLabel: 'GOALS',
tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
}}
/>
</Tab.Navigator>
);
};
based on the react-native-navigation docs you need to use the option tabBarStyle here's a the docs
or just add this:
<Tab.Navigator
screenOptions={{
tabBarStyle: { padding: 20 },
}}
>
I started to learn ReactNative and I'm trying to change bottom tab navigation color according to active route but I couldn't find how I can make it. I tried setting state but I couldn't find where I can get focused route to set a state variable.
const Tab = createMaterialBottomTabNavigator();
const MyTabs = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#f0edf6"
inactiveColor="#3e2465"
tabBarOptions={{
style: {
backgroundColor: "red",
}
}}
>
<Tab.Screen
name="Home"
component={WelcomePage}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Account"
component={AuthScreen}
options={{
tabBarLabel: "Account",
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
}
I found how to change background:
<Tab.Screen
name="Home"
component={WelcomePage}
options={({route}) => ({
tabBarStyle: {
backgroundColor: "#fc03cf"
},
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
})}
/>
You can simpy do this also
tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'green',}}
Try this.
const Tab = createMaterialBottomTabNavigator();
const MyTabs = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#f0edf6"
inactiveColor="#3e2465"
tabBarOptions={{
style: {
backgroundColor: "red",
}
}}
>
<Tab.Screen
name="Home"
component={WelcomePage}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color,focused }) => (
<MaterialCommunityIcons name="home" color={focused?'red':'blue'} size={26} />
),
}}
/>
<Tab.Screen
name="Account"
component={AuthScreen}
options={{
tabBarLabel: "Account",
tabBarIcon: ({ color,focused }) => (
<MaterialCommunityIcons name="account" color={focused?'red':'blue'} size={26} />
),
}}
/>
</Tab.Navigator>
);
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
}
I am making an app i have made a bottom navigation bar.I have used material-bottom-tabs.
I added Lottie animation But when i click on tab the tab animate.it animates contentiously.
Here is the code
const Tab = createMaterialBottomTabNavigator();
export const Mytabs = () => {
return (
<Tab.Navigator
activeColor="#B32626"
sceneAnimationEnabled
inactiveColor="#f0edf6"
style={style.nav}
barStyle={{
backgroundColor: "black",
position: "absolute",
overflow: "hidden",
margin: 20,
borderRadius: 30,
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: "Home",
tabBarColor: "green",
tabBarIcon: ({ focused, color, size }) => (
<LottieView
autoPlay={focused}
source={require("../assets/lottieicons/Homeicon.json")}
/>
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
tabBarLabel: "Search",
tabBarIcon: ({ focused, color, size }) => (
// <Icon name="search" color={color} size={26} />
<LottieView
autoPlay={focused}
source={require("../assets/lottieicons/searchicon.json")}
/>
),
}}
/>
<Tab.Screen
name="Favourite"
component={Favourite}
options={{
tabBarLabel: "Favourite",
tabBarIcon: ({ focused, color, size }) => (
// <Icon name="bookmark" color={color} size={26} />
<LottieView
autoPlay={focused}
source={require("../assets/lottieicons/Bookmarkicon.json")}
/>
),
}}
/>
</Tab.Navigator>
);
};
I added loop={false} but then it is not animating even a single time it only animate when app starts.
Here is the changed code:
const Tab = createMaterialBottomTabNavigator();
export const Mytabs = () => {
return (
<Tab.Navigator
activeColor="#B32626"
sceneAnimationEnabled
inactiveColor="#f0edf6"
style={style.nav}
barStyle={{
backgroundColor: "black",
position: "absolute",
overflow: "hidden",
margin: 20,
borderRadius: 30,
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: "Home",
tabBarColor: "green",
tabBarIcon: ({ focused, color, size }) => (
<LottieView
autoPlay={focused}
loop={false}
source={require("../assets/lottieicons/Homeicon.json")}
/>
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
tabBarLabel: "Search",
tabBarIcon: ({ focused, color, size }) => (
// <Icon name="search" color={color} size={26} />
<LottieView
autoPlay={focused}
loop={false}
source={require("../assets/lottieicons/searchicon.json")}
/>
),
}}
/>
<Tab.Screen
name="Favourite"
component={Favourite}
options={{
tabBarLabel: "Favourite",
tabBarIcon: ({ focused, color, size }) => (
// <Icon name="bookmark" color={color} size={26} />
<LottieView
autoPlay={focused}
loop={false}
source={require("../assets/lottieicons/Bookmarkicon.json")}
/>
),
}}
/>
</Tab.Navigator>
);
};
Please help me solve this.
I want the tab to animate only once when focused on it
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