callstack / callstack/react-native-paper

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

Aperta
#4,030 5 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug List
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
5g 23h
PR unite (30g)
12

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.