Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Pressable] android_ripple / color doesn't work correctly #3246

Closed
freeboub opened this issue Nov 29, 2024 · 5 comments · Fixed by #3369 · May be fixed by #3250
Closed

[Pressable] android_ripple / color doesn't work correctly #3246

freeboub opened this issue Nov 29, 2024 · 5 comments · Fixed by #3369 · May be fixed by #3250
Assignees
@latekvo
Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided

Comments

@freeboub
Copy link

freeboub commented Nov 29, 2024 •
edited
Loading

Description

on Pressable android_ripple={color: XXX} doesn't work correctly.

Here are issues:

  • when user configure the android_ripple={color: "#FF0000"} => the ripple color is grey. What ever the configured color is, the color ripple color is always grey (should be red with this sample)
  • when user configure the android_ripple={color: "#FFFFFF4F"} (With transparency) => the ripple color is blue. depending of transparency level, the color is sometimes grey ...
  • I have also notice that a fast refresh doesn't refresh correctly the ripple color. (maybe it can help to identify the issue, or at least don't fall in that trap)

I checked with default react native Pressable these 3 use cases works fine.

Steps to reproduce

Just define a Pressable with android_ripple={{color}}

<Pressable onPress={() => console.log('onPress')} android_ripple={{color: '#FF0000'}}>
         <Text>'Hello World'</Text>
</Pressable>

Snack or a link to a repository

https://github.com/freeboub/bug-react-native-gesture-handler-android-ripple-color

Gesture Handler version

2.21.2

React Native version

0.76.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Android emulator

Device model

reproduced on all android devices

Acknowledgements

Yes
@github-actions github-actions bot added Repro provided A reproduction with a snack or repo is provided Platform: Android This issue is specific to Android labels Nov 29, 2024
@freeboub freeboub changed the title [Pressable] android_ripple / color doesn't work orrectly [Pressable] android_ripple / color doesn't work correctly Nov 29, 2024
@freeboub
Copy link
Author

I tried to debug the issue and I have an interesting point, This issue is reproducible only with new architecture enabled.
JS side looks good, but setRippleColor on kotlin side is never called

@freeboub
Copy link
Author

Ok, I got the root cause, it looks like processColor should not be called with new architecture:
doing this in Pressable.tsx fix the issue:
rippleColor={android_ripple?.color ?? defaultRippleColor}
But it doesn't work with old architecture 😭

@freeboub freeboub mentioned this issue Nov 30, 2024
Draft
@freeboub
Copy link
Author

freeboub commented Dec 3, 2024

following patch can also be added to test the feature in the sample, but it breaks ios behavior, Not sure I should do it:

diff --git a/FabricExample/src/Navigator.tsx b/FabricExample/src/Navigator.tsx
index de9759f8e..d2d8227e0 100644
--- a/FabricExample/src/Navigator.tsx
+++ b/FabricExample/src/Navigator.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useState } from 'react';
-import { View, Text, Pressable, BackHandler } from 'react-native';
-
+import { View, Text, BackHandler } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { COLORS } from './colors';
 export interface RouteInfo {
   component: React.ComponentType;
   title?: string;
@@ -27,6 +28,7 @@ const Button = (props: ButtonProps) => {
         height: 48,
         justifyContent: 'center',
       }}
+      android_ripple={{color: COLORS.NAVY}}
       onPress={() => {
         props.onPress();
       }}>

@latekvo latekvo self-assigned this Dec 3, 2024
@th3poli th3poli mentioned this issue Jan 29, 2025
Open
@ulyavrubel
Copy link

Same issue with RectButton component. Only with new architecture enabled
See expo snack https://snack.expo.dev/@uvrubel/rectbutton-android-ripple-color

@latekvo latekvo mentioned this issue Jan 31, 2025
Merged
@latekvo
Copy link
Contributor

latekvo commented Jan 31, 2025

Please let me know if this PR fixes your issues: #3369

@latekvo latekvo closed this as completed in 7f90209 Feb 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@latekvo latekvo

Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Milestone
No milestone
3 participants
@ulyavrubel @freeboub @latekvo