callstack / callstack/react-native-paper
Children of List.Accordion are misaligned when adding a left icon
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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):

With an icon (incorrect alignment):

### 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.
Contributor guide
Assessment
This issue has not been assessed yet.