I have a component with following styles
shadowOffset: { width: 0, height: 4 },
shadowColor: Colors.grey,
shadowOpacity: 0.5,
shadowRadius: 2,
// overflow: 'visible',
borderRadius: 5,
but it's given me shadows for all elements inside a container. How to apply shadows only for container (Card) itself?
you have to give the container a backgroundColor:'white' for example
container:{
backgroundColor:'white',
borderRadius: 5,
...Platform.select({
ios: {
shadowOffset: { width: 0, height: 4 },
shadowColor: Colors.grey,
shadowOpacity: 0.5,
shadowRadius: 2,
// overflow: 'visible',
},
android: {
elevation: 4
},
})
}
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 have added the following style. This gives shadow from all the sides. I just want to add a shadow to the bottom.
{
shadowOffset: { width: 0, height: 2 },
shadowRadius: 3.84,
shadowOpacity: 0.25,
elevation: 5
}
You can do that on IOS or the web, but Android isn't supporting it, on Android you could just define elevation and other options of shadow don't work.
If you really need to do that, use BorderBottom,
{
...platform.select({
android:{
borderBottomWidth:2,
borderBottomColor:'#00000033'
},
default:{
shadowOffset: { width: 0, height: 2 },
shadowRadius: 3.84,
shadowOpacity: 0.25,
}
})
}
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've a card view with shadow. How can I differ the width of the shadow differently in top, bottom, right and left of the card?
const styles = {
containerStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 4,
marginLeft: 15,
marginRight: 15,
marginTop: 5
}
};
I used this library for handle shadows in my react-native app.
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'