Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Button ripple effect overflows outside button container Even without borderRadius
See original GitHub issueExplain what you did
I wrote a simple button with react-native-element .
<Button onPress={() => this.login()} title='login' containerStyle={styles.buttonContainer} />
Expected behaviour I expected ripple not to be borderless.
Describe the bug ripple is borderless.
To Reproduce
Example:
https://snack.expo.io/@ali.assar/button-problem
Steps
1. Click on 'Button'
2. See the overlay
Possible Solution In line 65 of Button.js maybe changing the bloolean from true to false (borderless property) can fix it.
if (Platform.Version >= 21) { attributes.background = TouchableNativeFeedback.Ripple( 'ThemeAttrAndroid', true ); }
----------------------------------->>>>>>>> if (Platform.Version >= 21) { attributes.background = TouchableNativeFeedback.Ripple( 'ThemeAttrAndroid', false ); }
Screenshots
My Environment
| software | version | | react-native-elements | 1.0.0| | react-native | 0.58 | | yarn | 1.13.0|
Issue Analytics
- State:
- Created 5 years ago
- Comments:9
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I had a similar issue. My mistake was to use margin on “buttonStyle” prop. Using it on “containerStyle” fixed the problem.
Save my day, thanks @koaladlt