I am using react native and currently have this css code for the navigator function code
<Tabs.Navigator
screenOptions={{
tabBarScrollEnabled: true,
tabBarShowLabel: false,
tabBarActiveTintColor: 'green',
tabBarStyle: {
backgroundColor: theme.backgroundColor,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
margin: 50,
maxHeight: 50,
borderRadius: 10,
justifyContent: 'center',
...style.shadow
}
}}
>
How do I style the active blue bar selector. I would ideally just want to change the color. What is the best way to go about this. I have tried using tabBarActiveTintColor with no luck.
What I want styled
Use the tabBarIndicatorStyle: { backgroundColor: 'green' }, to change bar color in version 6 :)
please do this
tabBarOptions={{ tabBarActiveTintColor:'blue' }}
It helps you lots.
Related
I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
Recently I tried a lot to draw a semi-ellipse in react native but I didn't get any good result. Here is what I tried
semiEllipse:{
width: '100%',
height: 50,
borderRadius: 0.7*width,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: 'red',
}
The above code gives me the following output:
but this is not what I am trying to achieve as you guys can see this is not a pure ellipse.
What I am trying to achieve is half of the following:
Please help me with this. Thanks in advance!
width: 100,
height: 100,
backgroundColor: 'red',
borderRadius: 50,
transform: [
{scaleX: 2}
]
This should give you an oval shape. I would then just do a minus margin and overflow:hidden on the parent.
Having some styling issues on React Native with Shadows.
I'd like to get a shadow on just the image, which has curved edges (not a square) with the borderradius I've given it. But if I apply a shadow on the parent View, it can't seem to 'follow the edges' of the Image. I'd like for the shadow to be around the curved edges of the Image, not around the square view.
Here is my code:
<View style={[styles.closedcontainer]}>
<Image source={{uri: props.food.url}}
style={styles.smallimage}
/>
</View>
And here is my styling:
const styles = StyleSheet.create({
closedcontainer: {
height: 100,
width: 100,
flexDirection: 'row',
flexWrap: 'wrap',
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 0,
paddingTop: 0,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff9f9',
shadowColor: 'black',
shadowOffset: {width: 2, height: 5},
shadowOpacity: .30,
shadowRadius: 5,
// overflow: 'hidden'
},
smallimage: {
height: 100,
width: 100,
borderRadius: 30,
borderColor: "#f97070",
borderWidth: 2.75,
margin: 10,
backgroundColor: 'white',
resizeMode: 'contain'
}
I thought perhaps adding overflow hidden to the parent View's styling (closedcontainer) would do it, but that gets hides the whole shadow altogether.
Any ideas? Thanks!
UPDATE: per suggestion, tried setting the borderRadius directly in the , unfortunately still no luck.
Try setting borderRadius directly as a prop on the image instead using it as a style.
<Image borderRadius={25}/>
Or similar
I am looking for some styling guidance for React-Native. I am wanting to create a border that only has a certain amount of the corners colored. Something like this:
I currently have this:
captureSquare: {
height: 450,
width: 450,
borderWidth: 2,
borderColor: '#FFFFFF,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
I am not sure how to break up the borders. Any ideas?
Was able to do this by adding 4 <View />s to the captureSqaure and giving them the following properties:
topLeftEdge: {
position: 'absolute',
top: 0,
left: 0,
height: 25,
width: 25,
borderColor: '#FFFFFF,
borderLeftWidth: 3,
borderTopWidth: 3,
},
I want to have a Switch component without extra height, width, padding, margin
This is my Switch component
<Switch
checked={isSubscriptionStatusActive}
onChange={onHandleChangeSubscriptionStatus}
disabled={subscriptionStatus === 'deactive'}
aria-label="subscribption-status"
classes={{
root: classes.root,
bar: classes.bar,
}}
>
Here is it's styling
let style = {
root: {
display: 'inline-flex',
width: 0,
position: 'relative',
flexShrink: 0,
},
bar: {
borderRadius: 7,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
marginTop: -7,
left: '50%',
marginLeft: 0,
},
};
Steps to Reproduce (for bugs)
https://codesandbox.io/s/x2wom4pm9z
https://codesandbox.io/embed/x2wom4pm9z
Material UI Issue Filed Here
https://github.com/mui-org/material-ui/issues/9587
Technically, Switch doesn't have any "extra" width or height. The whitespace around it is used to render the ripple.
You can disable the ripple with the disableRipple prop, and affect the Switch width as you've dicscovered, but digging into the source, unfortunately it isn't currently possible to pass props to SwitchBase which would be needed to affect the IconButton that is used for the switch "thumb".
You could perhaps modify your issue to discuss the posibility of submitting a PR to adress this limitation. We have xxxProps props on other components for similar purposes.
PS. You forgot to link from your issue to here, but I found it anyway. :)