16

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.

1
  • 1
    Use elevation on TouchableOpacity style Commented May 3, 2018 at 20:18

1 Answer 1

43

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.