CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosreact-component
user14016776
user14016776

Reputation:

Why Pressable component's ripple effect only trigger on long press

I'm using new pressable component of react native thinking that it's easy to add ripple effect to it. But, I found that the ripple effect is being triggered only on long press.

i.e To see the ripple, I need to touch the button for atleast 120ms to 150ms. a rough guess.

I tried to recreate the issue on snack.expo.io but i'm getting Minified React error #130; I think snack won't support pressable.

I didn't found answer anywhere. And there is a active issue on github about this. But no where I found any workaround for this issue.

So, If anyone has a workaround for this kindly share here as it will help so many like me.

This is the code to add pressable with ripple effect

      <Pressable
        style={styles.buttonStyle}
        android_ripple={{color: 'black', borderless: true}}>
        <Text style={styles.buttonText}>Login</Text>
      </Pressable>

Upvotes: 0

Views: 2953

Answers (1)

Vikas Acharya
Vikas Acharya

Reputation: 4152

I just explored different links followed by the GitHub link you provided and finally found a workaround.

Accordingly, you just have to add a prop onPress={() => {}} on your code even if you don't use it.

This will solve the ripple delay problem.

Upvotes: 3

Related Questions