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
Research direction
Start in src/components/List/ListAccordion.tsx, focusing on the child style and its paddingLeft: 64px. Reproduce the two examples with and without the left List.Icon, then inspect how the accordion title and children are laid out. Done means adding a left icon no longer shifts child text unexpectedly, while the existing no-icon alignment remains correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 38/100