callstack / callstack/react-native-paper
M3 FAB shadow clipped by Android navbar
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### Current behaviour
The elevated `FAB` shadow is clipped by the Android navbar when positioned in the bottom right of the screen as per [M3 FAB layout specs](https://m3.material.io/components/floating-action-button/specs).
This is not an issue on iOS where the navbar is transparent by default.
### Expected behaviour
Shadow does is not clipped by navbar when set `bottom: 16`
Ideally the M3 `FAB` just has less shadow as well - like the [FAB pictured in your own docs](https://callstack.github.io/react-native-paper/docs/components/FAB/)
### How to reproduce?
1. Position the FAB in the bottom right
```ts
position: 'absolute',
bottom: 16,
right: 16,
```
2. Observe shadow clipping
### Preview

### What have you tried so far?
Overwriting shadow styles, or reducing elevation level - neither props are passed through by `FAB`
### Workaround
`bottom: 22` is the minimum distance from the bottom the `FAB` can be placed without the shadow clipping. Of course this does not conform to the M3 spec, but is better than having clipping
### Your Environment
| software | version
| --------------------- | -------
| ios | NA
| android | 13
| react-native | 0.71.4
| react-native-paper | 5.8.0
| node | 18.12.1
| yarn | 3.6.0
| expo sdk | 48.0.16
贡献指南
调研方向
首先,在 Android 13 上使用 bottom: 16 和 right: 16 定位 FAB,以重现该问题,然后检查 FAB 组件及其阴影或 elevation 的处理方式。将结果与 M3 FAB 布局规范和组件文档中的示例进行比较。当 bottom: 16 处的阴影不会被裁剪,同时保留预期的 FAB 外观时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, react-native, typescript
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100