Ripple effect does not work on button in android #495
Description
Bug report
Summary
I built a button with with a linear gradient as background. On iOS this button has an ripple effect when clicked as expected. On Android there's no visual clue that the button was clicked.
Environment info
react-native info output:
System:
OS: macOS 10.15.5
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 24.02 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.1.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 21, 22, 23, 26, 27, 28, 29
Build Tools: 23.0.1, 24.0.1, 26.0.1, 28.0.3, 29.0.2, 29.0.3
System Images: android-24 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
Library version: 2.5.6
Steps to reproduce
- Click on the button in iOS and android and notice the missing ripple effect.
Describe what you expected to happen:
- It has a ripple effect on both platforms
Reproducible sample code
import {Button} from 'react-native-elements';
<Button
type={'solid'}
{...props}
buttonStyle={{backgroundColor: theme.colors?.red}}
titleStyle={{color: theme.colors?.textOnPrimary}}
ViewComponent={LinearGradient}
linearGradientProps={{
colors: ['red', 'blue'],
start: {x: 0, y: 0.5},
end: {x: 1, y: 0.5},
}}
/>