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 小时
- 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

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