callstack / callstack/react-native-paper

M3 FAB shadow clipped by Android navbar

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

![fab-shadow](https://github.com/callstack/react-native-paper/assets/14974903/fcd424f4-e9dc-40a3-a17c-2e602929067c)

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

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

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

評価

この issue はまだ評価されていません。

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

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