callstack / callstack/react-native-paper

Children of List.Accordion are misaligned when adding a left icon

Đang mở
#4,030 5 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug List
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
When using the `` element without an icon, the child text is aligned to the left side of the screen, as expected. However, as soon as I add a left icon to the accordion title, the child text is strangely aligned more towards the right.

### Expected behaviour
I would not expect an icon on the accordion title to affect the children, so the children should perhaps still be left-aligned, or at least aligned to the beginning of the accordion title text.

### How to reproduce?
Code without the icon where the children are aligned correctly:
```

This text is left-aligned correctly

```

Code with the icon where the children are misaligned:
```
}>
This text is not left-aligned correctly

```

Note that I am using the `Text` component from the `react-native-paper` library here.

### Preview
Without an icon (correct alignment):
![image](https://github.com/callstack/react-native-paper/assets/12899179/31432019-438f-4b2b-86d1-86c23e8ca2d2)

With an icon (incorrect alignment):
![image](https://github.com/callstack/react-native-paper/assets/12899179/f2fee53e-1209-400b-a679-c9c75c28e5b0)

### What have you tried so far?
I'm fairly sure the culprit is:
```
child: {
paddingLeft: 64,
},
```
in `src/components/List/ListAccordion.tsx`. I'm not sure the padding should be 64 here, but I don't know the initial reason this was added or what the fix should necessarily be.

### Your Environment

| software | version
| --------------------- | -------
| ios | 16.4
| react-native | 0.72.3
| react-native-paper | 5.6.0
| node | 20.5.1
| npm | 9.8.0

Thanks for a great library by the way, I love using it.

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.