Is there a way to add a Background Image to the bottom navigation bar
I tried using tab bar component but it did not help.
The code that I am using is
//Navigation Options
<Tab.Navigator
tabBarOptions={{
showLabel: false,
activeTintColor: '#656565',
inactiveTintColor: '#353B48',
style: {
backgroundColor: 'transparent',
},
}
}>
</Tab.Navigator>
}```
I think only option is building your own custom tabBar + icons etc:
And use ImageBackground instead of View for your image.
tabBar={(f) => (
<View style={{ backgroundColor: 'red', height: 100 }}>
{console.log(f.state.routeNames)}
</View>
)}
Related
I'm working on a react-native app using react-navigations createMaterialTopTabNavigator. I've read through the docs, but I cannot seem to find what props I need to modify to change the bottom border color of the active tab.
Does anyone have any advice?
FWIW here is my current Navigator code:
const TopTab = createMaterialTopTabNavigator()
function ProgressNavigator() {
const themes = useThemes()
return (
<TopTab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: themes.lightBackground,
},
tabBarLabelStyle: {
paddingTop: 10,
fontSize: 14,
fontWeight: "bold",
},
tabBarActiveTintColor: themes.secondary.color,
tabBarInactiveTintColor: "#FFF",
}}
>
<TopTab.Screen name="Table" component={ProgressTable} />
<TopTab.Screen name="Chart" component={ProgressChart} />
</TopTab.Navigator>
)
}
Use tabBarIndicatorStyle to style an indicator. Below example sets label (and possible icon) and indicator to red.
<Tab.Navigator
screenOptions={{
tabBarIndicatorStyle: {
backgroundColor: 'red'
},
tabBarActiveTintColor: 'red',
}}>
...
</Tab.Navigator>
Problem: Grey Background when clicking/Long Press on items.
Requirement: How to change grey background to orange color when I press items?
<Drawer.Navigator
drawerContent={(props)=><CustomDrawer {...props}/>}
screenOptions={
{
drawerStyle:{
width:300,
borderBottomEndRadius:15,
},
drawerLabelStyle:{
fontSize:18,
marginLeft:-10,
},
drawerItemStyle:{
marginLeft:0,
marginRight:0,
paddingLeft:10
},
drawerActiveBackgroundColor:'orange',
drawerActiveTintColor:'black',
}
}
>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: 'red',
activeBackgroundColor: 'grey',
inactiveTintColor: 'blue',
inactiveBackgroundColor: 'white',
labelStyle:{
fontSize: 15,
marginLeft:5
}
}}>
</Drawer.Navigator>
also follow the link
https://github.com/react-navigation/react-navigation/issues/9079
I suggest you to try this.
<Drawer.Navigator
screenOptions={{
drawerActiveBackgroundColor: ‘orange’
drawerActiveTintColor: ‘fff’
drawerInactiveTintColor: ‘#333’
}}
>
I need to add an indicator for the active tab I tried to add a borderBottom with tabStyle but we can't check focused with that.
Using react-navigation v5 and createBottomTabNavigator for bottom tabs.
Here's my code:
<BottomTab.Navigator
tabBarOptions={{
activeTintColor: colors.brown,
labelPosition: 'below-icon',
}}>
<BottomTab.Screen
name="Home"
component={HomeTabNav}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({focused}) => {
return focused ? (
<HomeSelectedIcon height={ms(24)} width={ms(24)} />
) : (
<HomeIcon height={ms(24)} width={ms(24)} />
);
},
}}
/>
...
</BottomTab.Navigator>
);
};
Thanks in advance!
I figured it out myself by making a custom tabbar icon if someone needs to achieve this using the bottom-tab bar only.
Here's the code.
<BottomTab.Navigator
tabBarOptions={{
activeTintColor: colors.brown,
showLabel: false,
tabStyle: styles.tabStyle,
style: styles.tabContainerStyle,
}}>
<BottomTab.Screen
name="Home"
component={HomeTabNav}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({focused}) => {
return focused ? (
<View style={styles.labelFocusedContainer}>
<HomeSelectedIcon height={24} width={24} />
<Text style={styles.labelFocusedStyle}>Home</Text>
</View>
) : (
<View style={styles.labelContainer}>
<HomeIcon height={24} width={24} />
<Text style={styles.labelStyle}>Home</Text>
</View>
);
},
}}
/>
...
</BottomTab.Navigator>
const styles = StyleSheet.create({
labelContainer: {
alignItems: 'center',
width: '100%',
},
labelFocusedContainer: {
alignItems: 'center',
width: '100%',
borderBottomWidth: 3,
borderBottomColor: colors.brown,
},
labelFocusedStyle: {
textAlign: 'center',
marginVertical: 8,
color: colors.brown,
backgroundColor: 'transparent',
fontSize: 10,
},
labelStyle: {
textAlign: 'center',
marginVertical: 8,
color: colors.veryDarkgray,
backgroundColor: 'transparent',
fontSize: 10,
},
});
But the best and easy way to do this is by using createMaterialTopTabNavigator and using these props.
tabBarPosition="bottom"
tabBarOptions={{
showIcon: true,
pressOpacity: 1,
iconStyle: styles.iconStyle,
showLabel: true,
activeTintColor: colors.brown,
indicatorStyle: {
borderWidth: 2,
borderColor: colors.brown,
},
This does not seem to be possible / easily achievable with bottom-tabs, but you could use the material version - #react-navigation/material-top-tabs and configure it to match your needs, specifically using tabBarPosition="bottom" and tabBarOptions={{ indicatorStyle: { backgroundColor } }}.
You can check more options in the docs: https://reactnavigation.org/docs/material-top-tab-navigator/#tabbaroptions
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
const Tabs = createMaterialTopTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tabs.Navigator tabBarPosition="bottom" tabBarOptions={{ indicatorStyle: { backgroundColor: 'red' } }}>
<Tabs.Screen name="screen 1" component={View} />
<Tabs.Screen name="screen 2" component={View} />
</Tabs.Navigator>
</NavigationContainer>
);
}
The best answer would be to use the tabBarButton prop to override and add your own custom styles to the container of the tab button.
https://reactnavigation.org/docs/bottom-tab-navigator#tabbarbutton
const CustomTabButton = (props) => (
<Pressable
{...props}
style={
props.accessibilityState.selected
? [props.style, styles.activeTab]
: props.style
}
/>
)
styles.activeTab is the custom style you want to add, be careful to spread the props.style to get the default styles from the library like width, padding, height etc
props.accessibilityState.selected will add styles according to condition if you want styles for all the tabs you can remove the condition.
Inside screeenOptions prop on navigator or the option props of each screen.
tabBarButton: CustomTabButton
Using material top tab is not a good solution because it does not support well with a keyboard. But bottom tabs do work well with the keyboard.
I have searched a lot about Navigation in React Native. I saw a lot of possibilities but I never found something like on Instagram. I did found a Bottom Tab bar Navigation, but there is always:
a) An animation
b) A Text
c) A color
d) .........
But I never found a bar like this. Do I have to use React Navigation for Nativgation or is it just helpful? What if I don't use it? :) And how could I do a menu bar like this (I think you all know how Instagram Navigation works):
Btw. I don't use expo :)
I use import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs'; because I was having many problems with the #react-navigation/bottom-tabs.
To use on bottom you can do this:
const Tab = createMaterialTopTabNavigator();
...
<Tab.Navigator
initialRouteName="Home"
tabBarPosition="bottom"
lazy={true}
tabBarOptions={{
activeTintColor: colors.orange,
inactiveTintColor: 'gray',
showIcon: true,
indicatorStyle: { backgroundColor: 'transparent' },
labelStyle: {
fontFamily: 'GothamRounded-Bold',
fontSize: widthPercentageToDP('3%'),
bottom: 1.5,
alignSelf: 'flex-start'
},
activeTintColor: colors.orange,
inactiveTintColor: colors.greyLight,
style: {
elevation: 5,
shadowColor: '#000',
shadowOpacity: 0.2,
shadowOffset: {
height: 1,
width: 0
},
position: 'absolute',
width: widthPercentageToDP('100%'),
zIndex: 8,
borderTopColor: 'transparent',
bottom: keyboard,
justifyContent: 'center'
},
upperCaseLabel: false
}}>
...
And then you can customize as you want
To change icon I do this:
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused }) => (
<FastImage
source={focused ? homeOrange : homeGrey}
style={{ flex: 1, width: null, height: null }}
resizeMode="contain"
/>
),
tabBarLabel: 'Home'
}}
/>
My goal is to reproduce a stack card style that exists in the ios Spotify app in my react native application.
In Spotify, the currently playing song screen is a full screen modal:
When closing down the modal, the style of the card is modified to show a border top radius:
I am using React Navigation. For now I only achieved to style the card permanently with a border radius using the React Navigation 'options' prop to style the card. My goal is to show the border radius only while the stack card is getting closed down.
<Stack.Screen
name="ScreenName"
component={ScreenComponentName}
options={{
cardStyle: {
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
}}
/>
Any idea how I could modify the card style to add border radius only when the card is getting closed?
You may need to provide a header in your Screen, rather than using the header provided by the Navigator. Then, you can set the borderRadius on your header View.
Your Navigator:
<Stack.Screen
name="MyScreen"
component={MyScreen}
options={{
headerShown: false,
}}
/>
Your Screen:
function MyScreen() {
const insets = useSafeAreaInsets();
return (
<>
<View
style={[
styles.header,
{ borderTopLeftRadius: 38, borderTopRightRadius: 38 },
{ paddingTop: insets.top },
]}
>
<TouchableOpacity>
<Icon source={require('../assets/images/my-icon.png')}/>
</TouchableOpacity>
<TouchableOpacity>
<Icon source={require('../assets/images/my-icon.png')}/>
</TouchableOpacity>
</View>
<View style={styles.body}>
<Text>Foo</Text>
</View>
</>
)
}
const styles = StyleSheet.create({
header: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: 20,
},
body: {
flex: 1,
}
});