Gradient Button doesn't show visual onPress like regular button

[thijssmudde]

Explain what you did (Required)

Created a gradient button. See example here:

import LinearGradient from 'react-native-web-linear-gradient'
import React from 'react'

<Button
  title={'TITLE'}
  onPress={onPress}
  ViewComponent={LinearGradient}
  linearGradientProps={{
    colors: ['#FFF', '#333'],
    start: { x: 0, y: 0 },
    end: { x: 0, y: 1 },
  }}
/>

Expected behavior (Required)

When pressing the button onPress is fired, but the user does not get any tactile feedback. See image. The Strava button works fine, but the Continue button does not give any feedback to the user whatsoever.

Describe the bug (Required)

It appears that once you add linearGradientProps the button does no longer provide feedback to the user.

To Reproduce (Required)

1. yarn add react-native-web-linear-gradient
2. copy above code in your project
3. Click the button

Screenshots (Required)

Your Environment (Required):

software	version
react-native-elements	^0.18.0
react-native	0.62.2

[supermar1010]

I have a similiar problem. For me it works as expected on iOS but not on Android. On android the ripple effect is missing. I didn't try web

[flyingcircle]

Any reason that you are using such an old version of RNE? Can you please verify that it still happens in at least v1.2.7?

[supermar1010]

For me this issue also happens with the newest RNE

software	version
react-native-elements	2.2.0
react-native	0.61.5

I'm gonna update react-native this week to 0.63.

[supermar1010]

I updated to react-native 0.63, now everything is broken and the button still has no ripple effect

[flyingcircle]

RN 63 now has a Pressable component that may be worthwhile using in place of the Touchable component. @supermar1010 can you try setting TouchableComponent to Pressable and see if that fixes the android issue?

[supermar1010]

I just tried that, doesn't work as well, there's no ripple effect on either android or iOS. Here's a small demo project its basically a new reactnative project with RNE, RN-linear-gradient and rn-vector-icons. The touchable component is commented out right now, because I tested both.
testgradientbuttonwithoutnodemodules.zip
The new Pressable has in it's default setting no ripple effect, but I have to pass a ripple config but in the button, I did not find a way to do that.

[supermar1010]

Any update on this issue?

[flyingcircle]

@supermar1010 this is an open source project. The fastest way to a resolution and fix is to submit your own PR. You can wait for someone else or me to fix it, but that can realistically take months.

[supermar1010]

Do you have any suggestion/hint how to fix this? I would do it, but I'm a bit lost how to do it.

[flyingcircle]

@supermar1010 A good place to start would be to look at maybe the react-native issue history to see if they had to deal with a similar issue, or perhaps any issues related to Gradient itself that might be related to Android. I haven't really used gradient in my own apps, so I'm not too familiar with what libraries are all exactly involved.