I am trying to make the background of NavigationContainer transparent for making the items under bottom to be visible , but it is not working in my case. Please do help if you know how to achieve this in react native.Following is my code for Tab.Navigator
import {NavigationContainer, DefaultTheme} from '#react-navigation/native
<TabNavigator.Navigator
tabBarOptions={{
showLabel: false,
style: {
backgroundColor: "blue",
marginBottom: 15,
borderRadius: 15,
marginHorizontal: 10,
height:60
},
activeTintColor: constants.APP_THEME_COLOR,
inactiveTintColor: constants.APP_WHITE_COLOR,
keyboardHidesTabBar: true,
}}>
....
const navTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: 'red',
},
};
function App() {
return (
<NavigationContainer theme={navTheme}>
<SwitchNavigator />
</NavigationContainer>
);
}
I have tried background: 'transparent' ,but it is not working.Please refer the screenshot attached.
background:red
2.background:transparent
I fixed this issue by adding position:absolute to tabBarOptions
tabBarOptions={{
showLabel: false,
style: {
backgroundColor: "blue",
marginBottom: 15,
borderRadius: 15,
marginHorizontal: 10,
height:60,
position: 'absolute',
},
Related
I'm using "#react-navigation/material-top-tabs": "^5.1.7" in my React Native app, and have the following top tab navigator:
The individual tabs are equal width, but each word is a different length, which means that there's unequal space between each word. I want to make it so that there is equal spacing around each word. Here is my code that I'm using for the navigator. The style property in tabBarOptions is the parent container with the red border, and the tabStyle property is the child containers with the yellow borders:
const CallsRequestsNavigatorOuter = () => createMaterialTopTabNavigator(
{
'Waiting': {screen: Waiting},
'Active': {screen: Active},
'Cleared': {screen: Cleared},
'All': {screen: All},
},
{
initialRouteName: "All",
tabBarOptions: {
style: {
backgroundColor: 'transparent',
borderTopWidth: 0,
width: Math.round(Dimensions.get('window').width) - 100,
left: 50,
right: 0,
shadowOpacity: 0,
elevation: 0,
borderWidth: 1,
borderColor: 'red'
},
upperCaseLabel: false,
tabStyle: {
padding: 0,
justifyContent: 'center',
height: 0.45*topSwooshAspectRatio*Math.round(Dimensions.get('window').width),
borderWidth: 1,
borderColor: 'yellow',
},
labelStyle: {
fontSize: normalizeFontSize(13)
},
indicatorStyle: {
backgroundColor: 'transparent',
},
activeTintColor: Color.lightBlueOpaque,
inactiveTintColor: 'white'
}
}
)
SOLVED: add contentContainerStyle: {alignItems: 'center', justifyContent: 'space-around'} to tabBarOptions, and add width: 'auto' to tabStyle. The key is that contentContainerStyle rather than style is the direct parent of tabStyle. So now I have this:
How can I change the background color of the active tab while using material-top-tabs from React Navigation?
Here's what things look like right now:
Screenshot 1
Screenshot 2
Here's my code:
import React from 'react'
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import CrurrentOrders from './CrurrentOrders';
import PastOrders from './PastOrders';
const Tab = createMaterialTopTabNavigator();
const OrdersTabs = () => {
return (
<Tab.Navigator
initialRouteName='CrurrentOrders'
backBehavior='initialRoute'
tabBarPosition='top'
swipeEnabled={true}
swipeVelocityImpact={0.2}
springVelocityScale={0}
sceneContainerStyle={{ backgroundColor: '#d1dfff', margin: 10, borderRadius: 20 }}
style={{ backgroundColor: '#ffffff' }}
tabBarOptions={{
activeTintColor: '#ffffff',
inactiveTintColor: '#ffffff',
showIcon: true,
pressColor: '#856',
scrollEnabled: false,
tabStyle: { backgroundColor: '#36A7E7', borderRadius: 30, margin: 12, justifyContent: 'center', alignContent: 'center' },
indicatorStyle: { backgroundColor: '#987', opacity: 0.05 },
style: { backgroundColor: '#ffffff', borderRadius: 30, margin: 24, height: 72, width: '90%' },
labelStyle: { fontSize: 14 },
}}
>
<Tab.Screen
name="CrurrentOrders"
component={CrurrentOrders}
options={{
title: 'Awsome app',
tabBarTestID: 'werwer',
}}
/>
<Tab.Screen
name="PastOrders"
component={PastOrders}
/>
</Tab.Navigator>
)
}
export default OrdersTabs
I had this exact challenge and was able to solve it by specifying the background color and full height in the indicatorStyle option:
import * as React from 'react';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import HomeScreen from './HomeScreen';
import AboutScreen from './AboutScreen';
import ContactScreen from './ContactScreen';
const Tab = createMaterialTopTabNavigator();
export default function TopTabs() {
const tabBarOptions = {
activeTintColor: 'white',
inactiveTintColor: 'black',
indicatorStyle: { backgroundColor: 'red', height: '100%' },
pressOpacity: 1,
}
return (
<Tab.Navigator tabBarOptions={tabBarOptions}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="About" component={AboutScreen} />
<Tab.Screen name="Contact" component={ContactScreen} />
</Tab.Navigator>
);
}
Like Defined here material-top-tab-navigator/ changed the layer color (text color) of the active tab
For background change, you can do something like
function MyTabBar({ state, descriptors, navigation, position }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const inputRange = state.routes.map((_, i) => i);
const bgColor = isFocused ? "blue" : "black"; <!-- Here is bg color -->
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<View style={{backgroundColor: bgColor}}>
<Animated.Text style={{ opacity }}>
{label}
</Animated.Text>
</View>
</TouchableOpacity>
);
})}
</View>
);
}
Thank you for the link , the hack was in indicatorStyle with activeTintColor
tabBarOptions={{
activeTintColor: '#ffffff',
inactiveTintColor: '#36A7E7',
showIcon: true,
pressColor: '#9BC9E2',
scrollEnabled: false,
tabStyle: {
borderRadius: 30,
margin: 12,
justifyContent: 'center',
alignContent: 'center'
},
indicatorStyle: {
backgroundColor: '#36A7E7',
height: '80%',
borderRadius: 30,
marginBottom: 8,
marginLeft: 12,
width: '45%'
},
style: {
backgroundColor: '#ffffff',
borderRadius: 36,
margin: 24,
height: 76,
width: '90%'
},
labelStyle: { fontSize: 14 },
}}
enter image description here
I am trying to add border radius to bottom bar but with this
i want to change container color from default to purple.
how can i do that ?
What i have done so far
What i want
Code:
tabBarOptions: {
activeTintColor: colors.primary,
inactiveTintColor: colors.black,
showLabel: false,
style: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
borderColor: colors.lightGrayText,
},
},
Anyone can help ?
thanks
You have to add a position absolute which will make the tabbar stay inside the border
tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'black',
showLabel: false,
style: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor: 'red',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
borderColor: 'grey',
position: 'absolute'
},
}}>
Reference
https://github.com/react-navigation/react-navigation/issues/5928
If you have nested bottom tab into stack you should change color in stack screen , like code bellow
<Stack.Screen
options={{
headerShown: false,
cardStyle: {
backgroundColor: "white",
},
}}
name={mainStack.homeTab}
component={HomeTabs}
/>
I want to apply radius on bottom tab bar, but on background I have a white view. How can I remove this white view?
const BottomTabNavigator = createBottomTabNavigator({
HomeScreenStack,
// ArchiveScreenStack,
// SettingsScreenStack,
},
{
tabBarOptions: {
style:{borderRadius:21, backgroundColor:"#000000"}
}
}
)
Screen of bottom bar
You can remove the white space using style
const DEVICE_WIDTH = Dimensions.get('window').width;
const BottomTabNavigator = createBottomTabNavigator({
HomeScreenStack,
},
{
tabBarOptions: {
style:{
borderTopLeftRadius:21,
borderTopRightRadius:21,
backgroundColor:"#000000",
position:'absolute',
bottom: 0,
padding:10,
width: DEVICE_WIDTH,
height: 54,
zIndex: 8
}
}
}
)
Hope this helps
In the screenOptions of <BottomTabs.Navigator> there is a option of tabBarStyle, define it like this
tabBarStyle: {
backgroundColor: GlobalStyles.colors.accent500,
paddingTop: 7,
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
borderLeftWidth: 0.2,
borderRightWidth: 0.2,
position: 'absolute',
overflow: 'hidden',
},
Now you will have rounded corners in bottom tab and also there won't be any background white color
NOTE: screenOptions prop is present in React Navigation v6, for other versions there is prop but with different name, so explore the doc for other versions
Hope this will help you or somebody else...
Thanks!
Here is how I do it:
<Tab.Navigator
tabBarOptions={{
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
marginTop: -40,
}}
This will make the background be the screen. However you will also need to add a marginBottom:40 to each of your screens so that any components can be fully viewed.
Wrap <Tab.Navigator> with a view and style it with the backgroundColor you want ex.:
<View style={{flex: 1, backgroundColor: 'green'}}>
<AppTabs.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
backgroundColor: 'black',
height: 68
}
}}>
<AppTabs.Screen name="Home" component={Home} />
</AppTabs.Navigator>
</View>
tabBarOptions={{
showLabel: false,
activeTintColor: 'white',
inactiveTintColor: 'gray',
style: {
backgroundColor: 'blue',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
position: "absolute",
bottom: 0,
},
}}
I wanna to fit the indicator of navigation bar, to the tab. but it only fits for the 1st tab. for all other tabs, the indicator is slipped a bit for right side.
I have used margins for both left and right in the style section of navigation. Below images show the scenario.
Here is the code of the navigation component
const Navigation = createMaterialTopTabNavigator(
{
S: Screen1,
S2: Screen2,
S3: Screen3,
},
{
swipeEnabled: false,
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "blue",
upperCaseLabel: false,
scrollEnabled: false,
inactiveBackgroundColor: "white",
indicatorStyle: {
height: null,
top: 0,
backgroundColor: 'red',
width:110,
},
style: {
marginLeft: 15,
marginRight:15,
borderWidth: 1,
height: 30,
borderColor: "blue",
backgroundColor: "white",
},
tabStyle: {
borderWidth:1,
borderColor:"blue",
justifyContent: "center"
},
labelStyle: {
marginTop: -4
}
}
}
);
export default createAppContainer(Navigation);
How can i fix this ?
The problem is that your marginLeft and marginRight propagates through your whole tabBar.
You can fix this by introducing the following:
import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const tabBarWidth = width - 30; // Subtract margins from your screen width. In your case 2*15= 30
and updating your tabBarOptions:
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "blue",
upperCaseLabel: false,
scrollEnabled: false,
inactiveBackgroundColor: "white",
indicatorStyle: {
height: null,
top: 0,
backgroundColor: 'red',
//width:110, remove width here
},
style: {
marginTop: 60, // quick hack for iphone X
marginLeft: 15,
marginRight:15,
borderWidth: 1,
height: 30,
borderColor: "blue",
backgroundColor: "white",
},
tabStyle: {
borderWidth:1,
borderColor:"blue",
justifyContent: "center",
width: tabBarWidth/4, // divided by amount of screens you have
},
labelStyle: {
marginTop: -4
}
}
As you can see the result works also with for example 4 Tabs: