Hi can somebody plz help with header styling in expo and react native. I want my header to look like this:
right now I only get this:
<Stack.Navigator
screenOptions={{
headerShown: true,
headerTitle: (props) => (
<Image
resizeMode='center'
style={{width: 180, height: 60, resizeMode: 'contain'}}
source={require('../assets/images/audienz_ws_no_slogan.png')}
/>
),
headerTintColor: 'transparent',
headerTitleContainerStyle: {justifyContent: 'center', alignItems: 'center'},
headerStyle: {
backgroundColor: Colors.pink,
borderBottomLeftRadius: 300,
borderBottomRightRadius: 300,
height: 120
},
headerBackTitleStyle: {
color: 'transparent',
},
headerBackTitleVisible: false,
}}
>
Related
i have a little problem.
I have a tabNavigator in which I have placed an element that must move according to the selected view.
My problem is that I can't specify exactly the position of tabscreen
I can make my element move close to the selection but it is not exactly at the same place
Here is a screenshot to show you what I can do for the moment the green element represents the element that must move.
Screen for this problem
my code :
const [positionX, setPositionX] = useState(new Animated.Value(0));
const animate = (x) => {
console.log("animate");
Animated.timing(positionX, {
toValue: x,
duration: 600,
useNativeDriver: true,
}).start();
};
return (
<NavigationContainer>
<Tab.Navigator
tabBar={(props) => {
console.log(props);
return (
<View
style={{
width: "100%",
height: 50,
backgroundColor: "red",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
}}
>
<Animated.View
style={{
transform: [{ translateX: positionX }],
position: "absolute",
width: 60,
height: 10,
backgroundColor: "green",
bottom: 50,
left: 0,
}}
></Animated.View>
{routes.map((route, index) => {
return (
<TouchableOpacity
style={{
width: 60,
height: 50,
backgroundColor: "blue",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
onPress={(event) => {
console.log(event.nativeEvent);
animate(
event.nativeEvent.pageX - event.nativeEvent.locationX
);
}}
onLayout={(event) => console.log(event.nativeEvent)}
key={index}
>
<Text>{route.name}</Text>
</TouchableOpacity>
);
})}
</View>
);
}}
initialRouteName="Home"
tabBarShowLabel={false}
screenOptions={{
tabBarShowLabel: false,
headerShown: false,
tabBarStyle: {
backgroundColor: "white",
borderTopColor: "#000",
height: 60,
bottom: 20,
width: "90%",
left: 20,
right: 20,
borderRadius: 15,
position: "absolute",
elevation: 0,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.53,
shadowRadius: 13.97,
elevation: 21,
},
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
<Tab.Screen name="Like" component={LikeScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
I would like my element to be placed at the click for example above Home or Settings... at the click.
I want to implement a top border radius to the active tab bar navigator to be like below image.
My code below is implementing a border radius to the whole createBottomTabNavigator but not as I expected above
<Tab.Navigator
tabBarOptions={{
showLabel:false,
activeBackgroundColor: COLORS.reddish,
inactiveBackgroundColor: COLORS.transparent,
style:{
position:'absolute',
bottom:0,
right:0,
left:0,
elevation:0,
height:55,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
},
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon:({focused })=> (
<View style={{
alignItems:'center',
justifyContent:'center',
}}>
<Image
source={icons.home}
resizeMode='contain'
style={{
width:30,
height:30,
tintColor:focused?COLORS.white: COLORS.reddish
}}
/>
<Text style={{
color:focused?COLORS.white:COLORS.reddish,
}}>HOME</Text>
</View>
)
}}
/>
//code for other Tab.Screen
</Tab.Navigator>
Kindly assist
I was able to figure out after going through React Navigation documentation.
To styles an individual tab I've added tabStyle in tabBarOptions props as seen in below code.
<Tab.Navigator
tabBarOptions={{
showLabel:false,
activeBackgroundColor: COLORS.reddish,
inactiveBackgroundColor: COLORS.transparent,
tabStyle:{ //Add this
borderTopRightRadius:20,//add border top right radius
borderTopLeftRadius:20,//add border top left radius
paddingVertical:3
},
style:{
position:'absolute',
bottom:0,
right:0,
left:0,
elevation:0,
height:60,
},
}}
>
The results are as per below just as I wanted
Thank you #Ankit Patel.
I have not tried your method but i'll definitely try it
I Added border radius to each tab item like this :
<Tab.Navigator
screenOptions={{
tabBarActiveBackgroundColor: 'red',
headerShown: false,
tabBarItemStyle: {
borderRadius: 200,
},
}}
tabBarOptions={{
tabStyle: {
borderTopRightRadius: 8,
borderTopLeftRadius: 8,
backgroundColor: colors.white,
},
}}
activeBackgroundColor: COLORS.reddish, First remove this and
<View style={{
alignItems:'center',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
backgroungColor:focused?COLORS.reddish: COLORS.white
justifyContent:'center',
}}>
in Tab.screen View Change this
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'
}}
/>
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,
},
}}