callstack / callstack/react-native-paper

Button and IconButton TouchableRipple borderRadius is calculated from the icon size and not the button borderRadius

オープン
#4,266 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

### Current behaviour

The `IconButton` component `TouchableRipple` `borderRadius` is calculated based on the icon size and the button padding.

https://github.com/callstack/react-native-paper/blob/8e5d12da0685fc5073fd930d4043131b1c472f8b/src/components/IconButton/IconButton.tsx#L150-L155

https://github.com/callstack/react-native-paper/blob/8e5d12da0685fc5073fd930d4043131b1c472f8b/src/components/IconButton/IconButton.tsx#L186

### Expected behaviour

The `borderRadius` for the `TouchableRipple` should match the `borderRadius` set for the button in `style`s and fill the button surface

### How to reproduce?

https://snack.expo.dev/@jahirfiquitiva/rnp-iconbutton-ripple

### Preview

![Shot 2024-01-11 at 12 10 10@2x](https://github.com/callstack/react-native-paper/assets/10360816/edbe7e00-be5a-4f70-9b61-d1e7049e9b64)

### Alternative solution

Add a prop to customize the `TouchableRipple` `borderRadius`.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

src/components/IconButton/IconButton.tsx の150〜155行目付近と186行目から始め、リンク先の Expo Snack を実行して ripple の形状を確認します。ボタンのスタイルと TouchableRipple borderRadius がどのように導出されるかを追跡します。ripple がボタンの表面を満たし、スタイル設定された borderRadius と一致すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
frontend, mobile
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
48/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。