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 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
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 的形状。跟踪 button 样式和 TouchableRipple borderRadius 的派生方式;完成的标准是 ripple 填满 button 表面,并与其样式化的 borderRadius 匹配。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
描述清楚
新手友好度
48/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。