My goal is to render an image with a shadow, I usually generate my shadows using this website: https://ethercreative.github.io/react-native-shadow-generator/
I tried this and it works fine in iOS but I cannot see any shadow in android, this website automatically generates with the elevation property so I don't know what the issue is, here is my code:
Main js file
<View style={styles.coverImageContainer}>
<Image
source={{
uri: coverUrl,
}}
style={styles.coverImage}
/>
</View>
Styles
coverImageContainer: {
shadowColor: '#000',
backgroundColor: 'transparent',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.32,
shadowRadius: 5.46,
elevation: 9,
},
coverImage: {
height: 243,
width: 150,
marginTop: '5%',
alignSelf: 'center',
resizeMode: 'cover',
borderRadius: 4,
},
Any help would be appreciated,
Thanks
Related
This is the code I used for the elevation
<View
style={[
{
backgroundColor: '#ffffff',
width: 30,
height: 30,
borderRadius: 15,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
]}
>
Image of shadow
You can clearly see the difference between these shadows.
I am using the same component multiple time in scrollView as below:-
The Image of my scrollView
I need to render rounded shadow on rounded button. Shadow should be render like given in image but some how i am not able to render like that.
But it is not render properly and display like below.
It looks like below
Style will be like this
const styles = StyleSheet.create({
buttonStyle : {
height: 60,
width: 60,
marginRight: 15,
shadowColor: "#4e4f72",
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0
},
borderRadius: 30,
elevation: 30,
},
})
View style
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
<Image style={styles.buttonStyle} source={require('../images/google.png')} />
<Image style={styles.buttonStyle} source={require('../images/facebook.png')} />
<Image style={{ height: 60, width: 60, }} source={require('../images/instagram.png')} />
</View>
Can you try to place your image inside a View. Remove the shadow styling from the image and place it to the View. In my case this is working.
<View
style={{
height: 60,
width: 60,
marginRight: 15,
shadowColor: '#4e4f72',
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0,
},
borderRadius: 30,
elevation: 30,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Image style={{ height: 60, width: 60, borderRadius: 30 }} />
</View>
Don't forget to add the require back to the Image component
I try to shadow image like on ios but i can't. I use elevation but nothing change and i get warning Invalid props.style key 'evelation'. How can i show image on Android like ios?
ss-ios
ss-android
ss-warning
My style:
shadowColor: 'black',
shadowOffset: {width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 3,
elevation: 5
It's a typo, the warning is telling you that you wrote evelation even if the code you posted is fine, are you sure they are the same?
try giving it a platform specific
import{Platform} from 'react-native';
const styles = StyleSheet.create({
image: {
..Platform.select({
ios: {
shadowColor: 'black',
shadowOffset: {width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 3,
},
android: {
elevation: 4
},
}),
}
})
You can use the shadow generator.
https://ethercreative.github.io/react-native-shadow-generator/
You will have to define the shadow on top view component and give the same width and height on both view and image component.
Example
<View
style={{
width: 200,
height: 200,
backgroundColor: 'yellow',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.58,
shadowRadius: 16.0,
elevation: 24,
}}>
<Image
source={DemoImage}
style={{
width: 200,
height: 200,
}}
/>
</View>
I use React Native 0.55, and I want to display a kind of icon on top of a , like this : http://b3.ms/qpknagGre9BR
For now, I use this :
<View style={styles.cardContainer}>
<Image source={iconPlayers} style={styles.iconTop} />
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
</View>
And my styles :
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
zIndex: 999,
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
It's crazy because now it works, but I have a problem, I can't put elevation: 4 on styles for an <Image /> element, I have a Warning.
If I remove the elevation: 4, of my styles, the image is shown behind the cardBox.
How can I achieve what I want without any warning ... ? Thanks.
** EDIT **
I wrapper the <Image /> in a <View />, and I put elevation property to the wrapper, and it works.
I thought elevation was for boxShadow for android, but it impacts the zIndex.
I am trying your code in snack expo, which uses the latest react-native version (55.4). There is no warning in applying elevation to Image property, it just works fine and the image is also above the card. If your react-native version gives warning just wrap it in a View and apply elevation to that View. Also, remember zIndex gets affected by your Views elevation (only Android). Since you have applied elevation: 4 to card box, you must give elevation >= 4 for your Image component else it will draw beneath the card box.
snack example: https://snack.expo.io/B14UPA9Bm
You can also avoid Zindex by changing the order of components,
// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
<Image source={iconPlayers} style={styles.iconTop} />
</View>
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
//zIndex: 999, not required now
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
Check and tell if it works in Android and iOS. thanks
My shadow is not working on iOS.
What am I doing wrong?
const styles = StyleSheet.create({
container: {
backgroundColor:'#F8F8F8',
alignItems:'center',
justifyContent:'center',
height:60,
paddingTop: 20,
borderBottomWidth:0,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 5
},
shadowRadius: 10,
shadowOpacity: 0.5,
elevation:3,
position:'relative',
},
});
You can use this to generate shadows for both iOS and Android
React native shadow generator
In fact, I tried it and it works fine on my already created TouchableOpacity Text:
<TouchableOpacity style={styles.TestView} onPress={()=> { this.doAction; }}
>
<Text style={[styles.normalText, styles.headerText, { color: colors.lighterPrimaryColor }]}>
TEST
</Text>
</TouchableOpacity>
And in style:
privateMessagesView: {
flexDirection: 'row',
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60,
paddingTop: 20,
borderBottomWidth: 0,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 5 },
shadowRadius: 10,
shadowOpacity: 0.5,
elevation: 3,
position: 'relative',
},
And here's the results on my android device:
If you want better results you can use react-native-cardview or you can use a card from a UI components library like native-base, react-native-material-design ..etc If you're using one.
Shadow in react native
import {Platform} from "react-native";
add below styles to View
{
backgroundColor: '#fff',
...Platform.select({
android: {
elevation: 2,
},
ios: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
},
}),
}
Try this (working for me):
justifyContent: 'center',
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: "row",
marginTop: 15,
height: 35,
width: 170,
marginHorizontal: 20,
marginBottom : 10,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 5,
elevation: 1.5,
borderColor: '#e6e6e6'