callstack / callstack/react-native-paper

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

Abierto
#4,030 5 comentarios 0 reacciones 0 asignados Ver en GitHub
bug List
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.