I'm having an issue in Android when adding elevation to a View.
As we can see, in the first example, the shadow casted by adding elevation is the same size for both rectangles. In the second example however, the shadow for the grey rectangle is bigger than the shadow for the blue rectangle.
The styling is exactly the same, however the only difference is the size of the rectangles.
(written in React Native)
Rectangle A:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 140, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 140, height: 60, backgroundColor: "#00aeef"}} />
</View>
Rectangle B:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 220, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 60, height: 60, backgroundColor: "#00aeef"}} />
</View>
Adding a shadow to a parent component is not a solution since the component are not the same height. In such a case shadow will be visible above the blue component, and it just doesn't look right.
Also increasing the value of elevation of the blue rectangle is not a solution, since increasing the value of elevation spreads the shadow, making it less visible.
Any ideas how I can make the shadows look alike when both the component have different sizes?
Related
I am working for a small startup, and I was tasked with implementing a settings screen design. Based off of what they designed, they want like a box that fits the screen with text on top of it that serves as a breaker between each section of the settings. I just can't figure out how to round the corners around the text.
So far what I did was:
<View className="w-full mt-2">
<Text style={styles.TextComponentStyle}>Account</Text>
</View>
And the style sheet looks like this:
TextComponentStyle: {
borderRadius: 5,
borderColor: '#DADEE8',
borderWidth: .5,
color: 'black',
backgroundColor: '#DADEE8',
padding: 2,
fontSize: 16,
margin: 10
}
It is giving me almost everything I want minus the rounded corners. It is showing up as square corners.
The Text element in React Native doesn't take border properties. You should apply the border properties to the container around the text element.
This should work for you:
<View className="w-full mt-2" style={styles.textContainer}>
<Text style={styles.TextComponentStyle}>Account</Text>
</View>
TextContainer: {
borderRadius: 5,
borderColor: '#DADEE8',
borderWidth: .5,
backgroundColor: '#DADEE8',
padding: 2,
margin: 10,
},
TextComponentStyle: {
color: 'black',
fontSize: 16,
}
I use expo template for creating an application. I would like to make the bottom menu with border-radius, but I have white space instead of background the page. How to fix it? Example see on the image
My styles for createBottomTabNavigator:
width: '100%',
height: 94,
paddingBottom: 20,
backgroundColor: 'red',
borderTopLeftRadius: 51,
borderTopRightRadius: 51,
borderWidth: 0,
borderColor: '#68a0cf',
overflow: 'hidden'
My styles for page(screen):
backgroundColor: 'blue',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start'
You should take the parent container for both the Bottom tab navigator and the page and style it with with = screenWidth and hight = screenHeight and make the background color blue of whatever you want.
By this way you will be able to get off with these white spaces.
I'm creating an translucent overlay and I want to add a shadow using elevation for Android with react-native. Problem is that it's rendering an internal "shadow" as well and the higher elevation, larger the shadow. How do I get rid of it?
Relevant code:
<View style={{
backgroundColor: 'rgba(255, 255, 255, .5)',
padding: 50,
elevation: 10, // 20 on image in the right
}}>
<MyButton onPress={() => this.newGame()} title="New Game" />
</View>
All of my gifs are on non-solid backgrounds. The only way to get GIFs to respect borderRadius right now is to use a hack called overlayColor per:
Rounded corner issue with GIF image in react native android
https://github.com/facebook/react-native/issues/11363
Does anyone have any other solution? overlayColor is not a solution for my use.
The solution for me was to wrap the Image in a View and have both the Image and the View with the same borderRadius.
EDIT: originally I said the image needed to have an overlayColor but it looks like it has no effect (which makes sense). Added code example that I'm using:
<View style={{ width: 80, height: 80, borderRadius: 40, overflow: 'hidden' }}>
<Image
source={image}
resizeMode='cover'
style={{
borderRadius: 40,
alignSelf: 'center',
width: 80,
height: 80
}} />
</View>
I am simply trying to take a square image and contain it within a circle in my react-native app on Android. A circle image basically.
<View style={mainStyle.profileImageContainer}>
<Image
style={mainStyle.profileImage}
source={{uri: CONFIG.media_url+this.props.image}}
resizeMode="cover"
/>
</View>
and styles:
profileImageContainer: {
translateY: -43,
alignSelf: 'center',
},
profileImage: {
resizeMode: 'cover',
height: 86,
width: 86,
borderWidth: 2,
borderRadius: 75,
overlayColor: CREAM,
},
But the only way to get it remotely circular on Android is to add the "overlayColor", but I need this to be transparent so the design behind is visible. The property transparent does not work.
Does anyone have any ideas how to achieve this? Am I missing some sort of simple property?
EDIT: Thanks to Dhruv Parmar's answer, I realised the issue is because I was using a GIF image. The method you would expect seems to work fine with jpgs and pngs, but not GIFS!
You don't need to have a wrapping view to achieve this, simply using borderRadius set to half of image size should do the trick. Any other styles you want can be applied directly to Image view
You can see an example here https://snack.expo.io/rJI4DzoDW
Use this style;
image: {
width: 150,
height: 150,
borderRadius: 150 / 2,
overflow: "hidden",
borderWidth: 3,
borderColor: "red"
}