Can someone help to solve this out i used the react native 0.54.0,
react-native-navigation, i use it on android device
thanks in advance.
this is the code for tab bar inside tab bar navigator.......
const { width, height } = Dimensions.get("window");
var myTabs = TabNavigator(
tabs:[
Setting: {
screen: SetttingScreen,
navigationOptions: {
tabBarLabel: "Settings",
tabBarIcon: ({ focused }) =>
focused ? (
<Image
style={{ width: 24, height: 24, tintColor: "white" }}
source={require("./app/components/Screens/Images/setting.png")}
/>
) : (
<Image
style={{ width: 24, height: 24, tintColor: "white" }}
source={require("./app/components/Screens/Images/setting.png")}
/>
),
title: "Settings",
headerTitleStyle: {
alignSelf: "center",
color: "white",
fontWeight: "normal"
},
headerStyle: { backgroundColor: "#333333" },
headerLeft: null,
headerRight: null
}
}
and this is the code of tab option
now someone ans me thanks in advance
`{
tabBarPosition: "bottom",
animationEnabled: true,
swipeEnabled: false,
forceTitlesDisplay: true,
tabBarOptions: {
pressColor: "blue",
indicatorStyle: {
opacity: 0
},
allowFontScaling: true,
upperCaseLabel: false,
showLabel: true,
activeTintColor: "blue",
labelStyle: {
fontSize: width * 0.022,
textAlign: "center"
},
showIcon: true,
style: {
// borderTopWidth: 0,
backgroundColor: "#221f1f",
tabBarButtonColor: "#000",
navBarTextFontSize: 34,
forceTitlesDisplay: true,
tabFontFamily: "Avenir-Medium"
}
}
}`
Related
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 want to the change user profile pic, when user log into the system. User avator in left side corner in the Material Tab navigator. When user log in to the system I store the image url in AsyncStorage as profilePic.
I want to access AsyncStorage and get the profile pic here.
<Image
source={{
uri:
'https://cdn.apparelconnects.com/users_2_a34456c8-6d69-4b80-98f2-d184ff9f504d_img.png',
}}
I try to many ways. but I can not do this. Here I attached my code. Anyone know the access AsyncStorage here, please help me..
const TabNavigator = createMaterialTopTabNavigator(
{
Profile: {
screen: Logout,
navigationOptions: {
title: 'Home',
tabBarIcon: ({tintColor}) => (
<Image
source={{
uri:
'https://cdn.apparelconnects.com/users_2_a34456c8-6d69-4b80-98f2-d184ff9f504d_img.png',
}}
style={{
width: tabBarConfiguration.icon_size,
height: tabBarConfiguration.icon_size,
borderRadius: 40 / 2,
overflow: 'hidden',
borderWidth: tintColor == colors.orange ? 2 : 0,
borderColor: tintColor,
}}
/>
),
},
},
Home: {
screen: Home,
navigationOptions: {
title: 'Home',
tabBarIcon: ({tintColor}) => (
<Image
source={require('../asserts/images/home_icon.png')}
style={{
width: tabBarConfiguration.icon_size,
height: tabBarConfiguration.icon_size,
tintColor: tintColor,
}}
/>
),
},
},
{
initialRouteName: 'Home',
activeColor: '#f0edf6',
inactiveColor: '#3e2465',
barStyle: {backgroundColor: '#694fad'},
tabBarPosition: 'top',
swipeEnabled: true,
lazy: true,
tabBarOptions: {
showIcon: true,
showLabel: false,
activeTintColor: colors.orange,
inactiveTintColor: '#a1a1a1',
style: {
backgroundColor: '#ffffff',
height: hp('10%'),
},
labelStyle: {
textAlign: 'center',
fontWeight: 'bold',
},
indicatorStyle: {
backgroundColor: 'transparent',
},
},
defaultNavigationOptions: ({navigation}) => ({
tabBarOnPress: ({navigation, defaultHandler}) => {
if (
navigation.state.routeName === 'Profile' ||
navigation.state.routeName === 'More'
) {
return null;
}
defaultHandler();
},
}),
},
);
export default createAppContainer(TabNavigator);
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:
I want to set default active and inactive backGroundColor for createMaterialTopTabNavigator
in my app. but it did not work correctly.
I tried to put those in style or tabBarStyle and also in navigationOptions but it's not an answer
Hotel:{
screen: Hotel,
navigationOptions: {
activeBackgroundColor: '#fff',
inactiveBackgroundColor: '#E9EEF6',
header: null, headerMode: 'none',swipeEnabled:false,
tabBarIcon: ({ focused }) => {
const image = focused
? activeHotel
: deactiveHotel
return (
<Image
style={{ width: 50, height: 50 }}
source={image}
/>
)}
}
},
Travel:{
screen: Travel,
navigationOptions:{
header: null, headerMode: 'none',swipeEnabled:false,
activeBackgroundColor: '#fff',
inactiveBackgroundColor: '#E9EEF6',
tabBarIcon: ({ focused }) => {
const image = focused
? activeTravel
: deactiveTravel
return (
<Image
style={{ width: 50, height: 50 }}
source={image}
/>
)}
}
},
},
{
tabBarOptions: {
showIcon : true,
showLabel : false,
tabStyle: {
height :100
},
style: {
backgroundColor : '#E9EEF6',
elevation:0
},
indicatorStyle :{
backgroundColor : 'transparent',
height :20,
}
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
},
I put those on Style or TabStyle but it did not work. when I remove
backgroundColor : '#E9EEF6',
the both tab color become blue (default color).
is there any answer or suggestion for this problem?
Unfortunately, you can't set active & inactive background for topTab. You can only do so for BottomTab.
But, you can set inactive and activeTintColor for the topTab
I solve my problem by editing style and tabStyle. in tabStyle I set backgroundColor for active tab and I set backgroundColor for inactive tab in style.
style: {
elevation : 0,
height : 100,
backgroundColor: 'white', //deactiveColor
justifyContent:'center',
flexDirection : 'column',
},
tabStyle: {
paddingTop : 20,
backgroundColor: '#1B275A', //activeColor
justifyContent:'space-between',
flexDirection : 'column',
height : 100,
},
I am trying to achieve row-wise icon and label for a tab navigator in one of my project. I am able to set icon and label as per the default settings, but i want the icon to be on the left side and label on the right not as icon on top and label on bottom.
This is my code:
export const InnerTab = TabNavigator({
Map: {
screen: MapStack,
navigationOptions: {
tabBarLabel: 'Map',
tabBarIcon: (
<Image source={require('../logos/map.png')}
style={[styles.innerTabIcon, {color: '#ffffff'}]}
/>
)
},
},
List: {
screen: ListStack,
navigationOptions: {
tabBarLabel: 'List',
tabBarIcon: (
<Image source={require('../logos/list.png')}
style={[styles.innerTabIcon, {color: '#ffffff'}]}
/>
)
},
},
},
{
tabBarPosition: 'top',
animationEnabled: false,
swipeEnabled:false,
lazy:true,
tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
marginTop:(Platform.OS === 'ios') ? 0 : 0,
height : 40,
},
indicatorStyle: {
backgroundColor : '#2394C7',
height :(Platform.OS === 'ios') ? 53 : 63,
},
style :{
backgroundColor:'#77909F'
},
labelStyle: {
fontSize: 18,
fontWeight:'bold',
marginTop: 0,
color :'#ffffff'
},
},
});
I have gone through the docs but found none. But tried few ways but didnt work.
Is there any way i can achieve it??
You can add flexDirection:'row' to tabStyle under tabBarOptions.
Reference:
https://reactnavigation.org/docs/navigators/tab
tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
marginTop:(Platform.OS === 'ios') ? 0 : 0,
height : 40,
flexDirection: 'row'
},
labelPosition under tabBarOptions seems to have been designed for this.
Reference:
https://reactnavigation.org/docs/bottom-tab-navigator#labelposition
tabBarOptions={{
activeTintColor: 'blue',
inactiveTintColor: 'gray',
labelPosition: 'beside-icon',
}}
Use alignself in the image styling in your icons.
Screen4: {
screen: WalletScreen,
navigationOptions: {
tabBarLabel: 'Wallet',
tabBarIcon: () => (
<Image
source={require('./Images/wallet2.png')}
style={{
width: 40,
height: 40,
alignSelf: 'center',
}}
/>
),
},