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>
Related
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 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
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
I have a project with a Stack and bottomTab navigator and I want to redirect to a stack navigator page from the bottomTabNavigator
Here is the code for my project:
Routes.js i.e Stack Navigator
<UserContext.Provider value={{userDetails, setUserDetails}}>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({scene, previous, navigation}) => {
const {options} = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return <Header title={title} />;
},
}}>
{userDetails ? (
<>
<Stack.Screen
name="home"
options={{title: 'Home'}}
component={BottomTabNavigator}
/>
<Stack.Screen
name="library"
component={Library}
options={() => ({
headerTitle: 'My Library',
})}
/>
<Stack.Screen
name="bookDetails"
component={BookDetails}
options={{title: 'Book Details'}}
/>
<Stack.Screen
name="reviews"
component={AllReviews}
options={{headerTitle: 'View all Reviews'}}
/>
</>
) : (
<Stack.Screen name="Login" component={Login} />
)}
</Stack.Navigator>
</UserContext.Provider>
bottomTabNavigator.js:
<Tab.Navigator
tabBarOptions={{activeTintColor: 'green', style: {height: tabBarHeight}}}>
<Tab.Screen
name={'Home'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="home" size={27} color={color} />
),
}}
/>
<Tab.Screen
name={'Search'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="search1" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'My Library'}
component={Library}
options={{
tabBarIcon: ({color}) => {
return (
<View
style={{
position: 'absolute',
bottom: 7,
height: 65,
width: 65,
borderRadius: 65,
backgroundColor: 'green',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
}}>
<AntDesign name="book" size={40} color={'white'} />
</View>
);
},
}}
/>
<Tab.Screen
name={'Browse'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="earth" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'More'}
component={More}
options={{
tabBarIcon: ({color}) => (
<Feather name="more-horizontal" size={30} color={color} />
),
}}
/>
</Tab.Navigator>
What I want to do is when I tap on My Library in the tabNavigator the headerTitle still says home, I want it to say ""
Here is how I tried to achieve this:
useLayoutEffect(() => {
navigation.setOptions({headerTitle: 'My Library'});
}, [navigation, route]);
Any help is appreciated
Thanks
I tried doing it automatically but I couldn't figure it out, but what I did was use my custom header component on each screen and hardcode the title of the screen, so the process may not be as efficient as letting react navigation do all the work, but it works fine for me
One workaround you can use is to hide the header in the Home Component of your Stack navigator. You can then create custom headers for each of the tab screens.
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>