Create "Raised" or Shadow effect on TouchableOpacity: React Native

Question

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.

Use `elevation` on `TouchableOpacity` style – Alessandro Macanha May 03 '18 at 20:18 — Alessandro Macanha, May 03 '18 at 20:18

score 40 · Accepted Answer · edited Jan 09 '19 at 13:41

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.

IOS Specific Props

Android Specific Props

Create "Raised" or Shadow effect on TouchableOpacity: React Native

1 Answers1