GeekyAnts / GeekyAnts/NativeBase

Cannot pass `startIcon` to custom `Button` variant

Open
#5,629 1 comment 0 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

I expect that using the `startIcon` prop, I can define a button variant that has a specific icon by default

### CodeSandbox/Snack link

https://snack.expo.dev/@localjo/ec312b

### Steps to reproduce

Try to create a custom button variant with an icon:
```
Button: {
variants: {
mine: {
bg: 'red.500',
_icon: { // Not working
as: Feather,
name: 'check',
color: 'white',
size: 'sm',
},
startIcon: { // Not working
as: Feather,
name: 'check',
color: 'white',
size: 'sm',
},
_startIcon: { // Not working
as: Feather,
name: 'check',
color: 'white',
size: 'sm',
},
},
},
},
```

The button will render with no icon. (see Snack)

### NativeBase Version

3.4.25

### Platform

- [ ] Android
- [ ] CRA
- [X] Expo
- [ ] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

Adding a custom `_icon` to an `IconButton` variant works fine, so I would expect it to work here too. May be related to #5369

Contributor guide

Open the contributing guide

Research direction

Start with the linked Expo Snack and reproduce the custom Button variant using startIcon, _startIcon, and _icon. Trace how Button variants handle icon configuration, then verify that the chosen icon renders with the configured Feather properties in the Snack.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.