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

tman091 picture tman091 · May 3, 2018 · Viewed 12.5k times · Source

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. Raised button example

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.

Answer

Pritish Vaidya picture Pritish Vaidya · May 3, 2018

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