How to get this effect?
Ready Card in NativeBase not work
flex: 1,
flexDirection: 'row',
backgroundColor: '#eaf6f8',
borderRadius: 10,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: .3,
shadowRadius: 3,
elevation: 1,
borderWidth: 3,
elevation : 5
or if you want more shadow increase the number
Related
When creating a border that has shadows, I noticed whatever text I put inside that border(which is a view) that my text also has the same shadow implementation.
How can I achieve this same shadow effect on my border but leave my text to the default styling?
<View style={styles.reviewBox}>
<Text style={{fontSize: 14, color: 'black'}}>
Why does this text have shadows on it
</Text>
</View>
reviewBox: {
width: 300,
height: 50,
borderTopWidth: 0,
borderBottomWidth:.5,
borderRightWidth: .5,
borderLeftWidth: .5,
borderColor: 'white',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
shadowColor: "#000000",
shadowOpacity: 1,
shadowRadius: 1,
shadowOffset: {
height: 1,
width: 1
}
}
You can try this:
backgroundColor: 'white',
shadowColor: '#000000',
shadowOffset: {
width: 3,
height: 3
},
shadowOpacity: 1.0,
borderRadius: 10,
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'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'
I am trying to implement box inner shadow similar to what you can achieve using box-shadow:inset in CSS. I tried the following, but I can't get it the shadow more prominent and darker. https://rnplay.org/apps/EHvL4g
var styles = StyleSheet.create({
container: {
flex: 1,
},
box: {
margin: 20,
flex: 1,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 1,
overflow: 'hidden',
shadowColor: 'black',
shadowRadius: 10,
shadowOpacity: 1,
},
});
Increase the borderWidth.
box: {
margin: 10,
flex: 1,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 30,
overflow: 'hidden',
shadowColor: 'black',
shadowRadius: 10,
shadowOpacity: 1,
}