react / react/react-native

Pressable Ripple Animation goes beyond curved border

Offen
#34,553 14 Kommentare 19 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Needs: Triage :mag: Never gets stale
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

When trying to create a Pressable that has a borderRadius style, the ripple animation goes beyond the curved borders. This issue seems to have existed for quite some time, while current solutions include wrapping the pressable in a view and applying borderRadius on that, is there a better way to fix this?

qGnUv
Gif source: StackOverflow Question
This stackoverflow link includes more information as well.

Version

0.69.1

Output of npx react-native info

System:
OS: Windows 10 10.0.22000
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 12.43 GB / 31.71 GB
Binaries:
Node: 14.20.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
Versions: 10.0.19041.0
IDEs:
Android Studio: AI-212.5712.43.2112.8609683
Visual Studio: 16.11.32802.440 (Visual Studio Community 2019)
Languages:
Java: 11.0.15 - C:\Program Files\OpenJDK\openjdk-11.0.15_10\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.1 => 0.69.1
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce
<Pressable
        android_ripple={{ color: 'red', borderless: false }}
        style={{ backgroundColor: 'blue', borderRadius: 10 }}>
        <Text style={{ alignSelf: 'center' }}>Button</Text>
</Pressable>

https://stackoverflow.com/questions/63048178/ripple-effect-leaking-at-corners-as-if-pressable-button-has-a-borderradius

Snack, code example, screenshot, or link to a repository

Same as above

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der Pressable-Reproduktion mit android_ripple, borderRadius und borderless: false und prüfe anschließend das verlinkte Stack Overflow-Beispiel sowie die Issue-Diskussion auf relevanten Implementierungskontext. Als abgeschlossen gilt die Aufgabe, wenn der Ripple auf den geschwungenen Rand von Pressable begrenzt bleibt, ohne eine Wrapper-View zu benötigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.