Current Behavior
Top side of tabBar has shadow.
Expected Behavior
how to remove top shadow of top tabBar?
tried elevation: 0 but it also removes bottom shadow.
Side note - How top shadow was achieved for Tabs.Navigator (react navigation)? as box-shadow properties does not work for android and elevation only shows shadow to bottom.
How to reproduce
<>
<Header /> //App name custom component
<Tabs.Navigator
...
tabBarOptions={{
....
style: {
// elevation: 0,
},
}}>
Try with this:
<>
<Header /> //App name custom component
<Tabs.Navigator
...
tabBarOptions={{
....
style: {
elevation: 0,
shadowColor: "#000000",
shadowOffset: { width: 0, height: 10 }, // change this for more shadow
shadowOpacity: 0.4,
shadowRadius: 6
},
}}>
shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View.
shadowOffset: { width: 0, height: -10 } shadows place only in top of View.
shadowOffset: { width: 10, height: 0 } shadows place only in right of View.
shadowOffset: { width: -10, height: 10 } shadows place only in left of View.
Found this example here.
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.
I want to create this UX design to React Native, but I'm wondering whats the best way to create this CSS design in the react-native?
FYI: I only care about the CSS for the outer wrapper( number 1 in the image below), container (number 2 in the image below) and then the items inside it.
Right now I have this code
wrapper: {
backgroundColor: palette.darkIndigo,
height: size.huge * 4,
width: '100%',
},
container: {
height: size.huge * 4,
position: 'absolute',
margin: size.medium-4,
backgroundColor: palette.white,
// width: '95%',
width: size.huge*3 + size.large - 7,
},
How to provide separate background colors i.e blue and grey in the pic on number 2.
Unable to give seperate background color using this:
backgroundColor: linear-gradient(palette.darkIndigo '50%', palette.grey '0%')
I dont want to create seperate
I'm looking for a css approach where where we can give 2 background colors to the same View.
Got it resolved by simple solution:
wrapper: {
// backgroundColor: palette.darkIndigo,
backgroundColor: palette.lightgrey,
height: size.huge * 4 + size.medium * 2,
flex: 1,
},
container: {
position: 'absolute',
height: size.huge * 4 + size.medium,
margin: size.medium - 4,
backgroundColor: palette.white,
width: size.huge * 3 + size.large - 7,
borderBottomColor: palette.green,
},
indigoBackground:{
height: size.huge*2 + 3,
backgroundColor: palette.darkIndigo,
},
<View style={style.wrapper}>
<View style={style.indigoBackground} />
<View style={style.container}>
<View style={style.bannerImage}>
I want to have a background image that takes all the screen and stays static when I scroll.
I have this component in a React Native project:
<ImageBackground` style={styles.backgroundImage}
source={require('../assets/images/Fondo1b.jpg')}>
....
</ImageBackground>
It is wrapping another components and it has this style:
backgroundImage: {
flex: 1,
resizeMode: 'cover',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
When I scroll up and down, it moves with the screen:
GIF link
In here you can see how it displaces with the scroll.
I need it to stay static occuping the size of the screen, not moving when I scroll and not displacing my FAB (it's Native Base's FAB, it that helps...)
Any tips, please?
Check this out. Need exactly this for React Native
https://medium.com/azimuth/adding-a-static-background-for-react-native-scrollview-79aa6b43e314
<ImageBackground style={styles.backgroundImage}/>
backgroundImage: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1
},
I'm trying to make a profile page ui, Where the profile data like name and bio container will stay 50% to the bottom of its top component which is cover picture right now.
So this is my React Native code,
<View style={styles.container}>
<View style={styles.coverContainer}>
</View>
<View style={styles.profileDataContainer}>
</View>
<View style={styles.intrestsContainer}>
</View>
<View style={styles.topicsContainer}>
</View>
</View>
And current styles,
const styles = StyleSheet.create({
container: {
},
coverContainer: {
height : 200,
backgroundColor : 'blue'
},
profileDataContainer: {
marginHorizontal : 30,
backgroundColor: 'white',
height : 200,
shadowColor: "#e5e5e5",
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 2,
shadowOpacity: 1.0,
elevation : 4,
marginTop : -100,
}
});
I have added marginTop : -100 to make it look like the structure I want.
So this is what it looks like right now after adding marginTop to -100, But that's not responsive, When I increase the size of that white block. It doesn't stay in center anymore.
Need Help on how to do that :(
You can do it using percentage instead of logical pixels like in this example :
const WindowHeight = Dimensions.get('window').height;
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerBackground}/>
<View style={styles.header}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'grey',
},
headerBackground: {
height: '30%',
width: '100%',
backgroundColor : 'blue'
},
header: {
height: '30%',
width: '80%',
marginTop: WindowHeight * -0.15,
backgroundColor : 'white'
}
});
In this example I set the height of the blue background and the white header to 30% of the window's height, and the marginTop to -15% of the window's height (I have to use Dimensions because if I use a percentage it'll be the percentage of the width...)
You can run my example on snack : https://snack.expo.io/Hyd7ChplX
You can nest your profileDataContainer in your coverContainer and place it absolute with top 50%. Hope you can convert it yourself to your React Native code...
Example:
.coverContainer{
height: 200px;
background-color: blue;
position: relative;
width: 100%;
}
.profileDataContainer {
position: absolute;
right: 10%;
left: 10%;
display: block;
top: 50%;
background-color: red;
height: 200px;
}
<div class="coverContainer"><div class="profileDataContainer"></div></div>
I want to add a shadow to the border of my view . But, i dont want all the child in the view to be affected by the shadow too . I just want shadow outside the border of view , but not the text or image in the view . is it possible to do this ?
<View style ={{
margin:5,
borderWidth:0.5,
borderColor:'grey',
borderRadius:15,
overflow:'hidden',
elevation:10,
height:100}}
></View>
You can use this for shadow :
view: {
height : 100,
width : 100,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
I hope this is helpful.
I want to add a shadow to the border of my view
You can apply the property boxShadow to your <View> element.
e.g.
boxShadow: '6px 6px 4px rgb(127, 127, 127)',