callstack / callstack/react-native-paper

M3 FAB shadow clipped by Android navbar

Đang mở
#3,957 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug FAB
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.