I'm using React Navigation and trying to apply a linear gradient from white to transparent to the tab navigator and have it sit at the bottom of the screen.
I've found a good solution for using react-native-linear-gradient with a navigation header here: React Navigation - Gradient color for Header
What isn't clear to me is how to apply this same logic to the tabBar. I tried defining a component like in the linked example and then passing that to backgroundColor, but it threw an error.
Here's my current code for the tabBarOptions:
{
tabBarOptions: {
activeTintColor: 'rgba(248, 164, 2, 0.6)', // Color of tab when pressed
inactiveTintColor: 'rgba(0,0,0,0.5)', // Color of tab when not pressed
showLabel: false,
indicatorStyle: {
backgroundColor: 'transparent'
},
style: {
backgroundColor: 'rgba(255, 255, 255, 1.0)',
borderTopColor: 'transparent',
height: dynamicSize(60),
position: 'absolute',
left: 0,
right: 0,
bottom: 0
},
},
},
I then pass this into the StackNavigator by defining tabs as:
tabs: {
screen: TabVisibleNavigator
},
Decided to go with a hack that seems to work fine:
In the tabBarOptions style set backgroundColor to transparent; positioning to absolute
Create gradient png image, save as an asset in the project
Load png as an element in the bottom of the main View container
Set png style as absolute so that it renders over the background container view
This will load a transparent tab bar over a gradient image. Not the most elegant solution but hopefully it helps someone stuck on the same problem.
Related
For context, I'm trying to make a progress circle following this article; essentially, I'm overlaying coloured semi-circles made from borders on top of a base circular border to represent progress. These semi-circle borders are theoretically made by setting the bottom and left borders to transparent, but when I do this the entire border disappears.
This is the simplified portion of the code that I'm working with:
import { StyleSheet, View } from 'react-native';
export default function App() {
return (
<View style={styles.semicircle}></View>
);
}
const styles = StyleSheet.create({
semicircle: {
width: 200,
height: 200,
borderWidth: 20,
position: 'absolute',
borderLeftColor: 'transparent',
borderBottomColor: 'transparent',
borderRightColor: '#3498db',
borderTopColor: '#3498db',
borderRadius: 100
}
});
When I set the transparent border sides to black instead, the entire circle is visible like so, but having any transparent borders causes the entire border to disappear. How do I fix this? Any help would be greatly appreciated.
Stack:
React Native
React Navigator
Core components only
I have this style on TabNavigator.tsx:
const styles = StyleSheet.create({
tabStyle: {
backgroundColor: colors.background,
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
height: 80,
overflow: 'hidden',
// position: 'absolute', // needed to ensure the bar has a transparent background in the corners
},
})
I keep commented the position absolute, there is always a background behind the corners, making it looking weird when a component of another color scroll.
Here it is, colored in yellow for visibility:
If I un-comment position absolute, the content flow behind the tab bar, making it feel more natural.
But...
I need to add a bottom margin on each screen to compensate the space that the tab takes, or the content in the bottom is hidden.
There i feel that there should be a good practice or a known pattern, maybe a tested workaround, that would make my life easier. Do you have an idea?
Thanks
Ahh, it's simple, after going through trial and error I discovered that just add Border Radius to it and make sure barStyle has overflow hidden. Here I pasted the snippet for it.
barStyle:{
borderRadius:50,
backgroundColor:"orange",
position: 'absolute',
overflow:'hidden',
left: 0,
bottom: 0,
right: 0,
padding:5,
}
Thnx me later...
tabBarOptions={{
style: {
backgroundColor: 'green',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
overflow: "hidden",
},
}}
I tried to make the tab bar a little be up and be round at bottom of the screen but when you apply the margin it left a white area and other components like scrollview cant show in this area .
i tried zIndex But the white areas are attached to tab bar and cant be handled by styling it
this is option for bottomtabbar including the style of tabbar .
const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
},
{
tabBarOptions: {
initialRouteName: 'HomeStack',
activeTintColor: '#e91e63',
inactiveTintColor: '#ddd',
style: {
borderRadius:30,
marginBottom:25,
marginHorizontal:10,
backgroundColor: '#4d535e',
// shadowColor:'#4d535e',
justifyContent:'flex-start',
alignContent:'flex-start',
alignItems:'flex-start',
// zIndex: 50,
alignSelf:'flex-start',
safeAreaInset:{}
}
}
}
if i want say what the result should be the pinterest app has a bottom tab bar like what i want ...
After a lot off struggling i found out that solution is quiet simple. u just need give the TabBar component style,these following code (add beside other styles).
{...other styles
bottom:20,
zIndex:1,
position:'absolute',
}
Below is tabBarOption's implementation in react native app.
tabBarOptions: {
activeTintColor: '#7364F1',
inactiveTintColor: '#000',
labelStyle: {
fontSize: 12,
},
},
I have added activeTintColor to change tint color of active tab, but it only changes the label's color on tabs not the icon's color on iOS simulator. Would appreciate any help for this.
Use -> activeBackgroundColor prop in to change the active tab's Color as follows :
tabBarOptions: {
activeBackgroundColor: 'green',
},
I want to create an overlay on top of react-native camera. However, I want only the center area to be clear and all other area to have some overlay with small opacity.
I have created component which acts as a wrapper and add corners, but I can't get overlay except in center. If I add overlay with background opacity it applies to whole screen including center box.
This is what I have so far.
<Camera style={[cameraStyle.camera]}>
<CustomView center style={[cameraMarkerStyles.container]}>
<CustomView
transparentBg
spaceBetween
style={[cameraMarkerStyles.cameraMarker]}
>
<CustomView row spaceBetween>
<CornerBox status={status} position="topLeft" />
<CornerBox status={status} position="topRight" />
</CustomView>
<CustomView row spaceBetween>
<CornerBox status={status} position="bottomLeft" />
<CornerBox status={status} position="bottomRight" />
</CustomView>
</CustomView>
<CustomView
style={[cameraMarkerStyles.container, cameraMarkerStyles.overlay]}
/>
</CustomView>
</Camera>
Bascially I add a View which is center area, which has 4 boxes at all corners which create the border. And then at the end there is a View which acts as overlay for whole screen. Now that last View if I change the background color to something other than transparent, it covers center area as well.
I have tried changing zIndex, set it to -1 as well. However that also did not work.
One very dirty solution that I have is I can place a View above center area and below center area and on each side of it and then give those views as some background and opacity. In that way we can add overlay just apart from center area.
Does anyone know any good way to implement such kind of layout? Even simple idea is enough, I don't need whole code.
Adding styles just in case anyone needs to see.
const markerSize = 250
const cornerBoxSize = 50
const cornerBoxBorderSize = 5
const cameraMarkerStyles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
},
overlay: {
zIndex: -1,
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
cameraMarker: {
width: markerSize,
height: markerSize,
},
cornerBox: {
width: cornerBoxSize,
height: cornerBoxSize,
},
topLeftBox: {
borderTopWidth: cornerBoxBorderSize,
borderLeftWidth: cornerBoxBorderSize,
},
})
const cameraStyle = StyleSheet.create({
camera: {
height: Dimensions.get('screen').height,
backgroundColor: 'transparent',
},
})
we talked about this on Twitter but I wanted to make sure the proposed solution was logged...
I suggest you create four translucent gray boxes for the four sides of the screen. The center of the screen will be blank and those four boxes will form a mask on each side of the center-area