callstack / callstack/react-native-paper

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

Open
#4,030 5 comments 0 reactions 0 assignees View on GitHub
bug List
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):
![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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.