callstack / callstack/react-native-paper
Button and IconButton TouchableRipple borderRadius is calculated from the icon size and not the button borderRadius
- 主要言語
- 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

### 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