How to make a circular button in android using react-native's TouchableNativeFeedback?

Question

With TouchableHighlight, I can easily make circular buttons using width, height, and borderRadius style properties.

However, borderRadius seems to be having no effect at all for TouchableNativeFeedback

I have tried wrapping the TouchableNativeFeedback element in a view with a borderRadius and overflow: 'hidden', but to no avail.

Would be glad to get some help here. Thanks.

Answer 1

You just need to set the borderRadius on a parent <View> around the <TouchableNativeFeedback>, and use the TouchableNativeFeedback.Ripple('your_color', true) method in the background prop (note, the borderless arg. set to true).

As described by reyeser here in react-native github issues.

Answer 2

Copyable example of Brad Adams answer:

<View style={{ borderRadius: 15, overflow: 'hidden' }}>
  <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#000000', true)}>
</View>

Edit: for some reason, somebody thought that I was copying an answer, but I just wanted to make a clear working example available