Pressable Ripple Animation goes beyond curved border
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
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?

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>
Snack, code example, screenshot, or link to a repository
Same as above
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
android_ripple、borderRadius、borderless: false を使用した Pressable の再現から始め、続いてリンク先の Stack Overflow の例と issue の議論を確認して、実装に関係するコンテキストを把握します。ラッパービューを必要とせず、ripple が Pressable の曲線状の境界内にクリップされたままになれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- android, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 42/100