I use react-native-elements
, and they make it easy to make an actual button appear "raised", or shadowed. I want to duplicate this look for TouchableOpacity
.
Here's an example of the "raised buttons" with react-native-elements
.
It is subtle, but noticeably makes a nice impact.
How would you go about mimicking this effect with TouchableOpacity
?
And yes, I've gone through the docs. If I missed anything, please point it out... but I don't think anything is there to accomplish this. Thanks.
You can add the following styles to your TouchableOpacity
to make it raised.
<TouchableOpacity style={styles.button} />
button: {
shadowColor: 'rgba(0,0,0, .4)', // IOS
shadowOffset: { height: 1, width: 1 }, // IOS
shadowOpacity: 1, // IOS
shadowRadius: 1, //IOS
backgroundColor: '#fff',
elevation: 2, // Android
height: 50,
width: 100,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
You can read more about them here.