callstack / callstack/react-native-paper
Icon in IconButton not centered and cannot be centered
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
Icon in IconButton is not centered
### Expected behaviour
Icon to be centered
### How to reproduce?
Add background color to IconButton using the style prop.
### Preview
### What have you tried so far?
Adding `alignItems: 'center'` and `justifyContent: 'center'` to both `style` and `contentStyle`. `style` aligned the trash can icon a little bit horizontally, but it was still off.
Adding `backgroundColor` to both `style` and `contentStyle`.
### Your Environment
| software | version
| --------------------- | -------
| ios | x
| android | 13
| react-native | 0.82.1
| react-native-paper | 5.14.5
| node | 22.11.0
| npm or yarn | x.x.x
| expo sdk | x.x.x
Contributor guide
Research direction
Start by reproducing the IconButton layout on Android with a backgroundColor supplied through style, using the versions listed in the issue. Trace the IconButton implementation and its icon container to identify why the icon bounds are offset; done means the icon is centered when the button has a styled background.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100