callstack / callstack/react-native-paper
on Expo 54, SegmentedButtons buttons prop conditional rendering does not render <MaterialCommunity/> icon
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
- When the SegmentedButtons component is passed a buttons prop and the buttons prop has conditional logic for showing an array of buttons based off of a boolean, then any icons to the right of the first segmented button do not show.
- The button functionality is not impacted.
### Expected behaviour
When pressing the edit button I expect the cancel button and delete button icons to show on the screen
### How to reproduce?
#### Create two separate arrays for showing a different set of icons and actions
```javascript
const segmentedButtons =[
{
value:'edit',
icon:()=> ,
onPress:()=> handleActivateImageGrid('edit'),
style:{backgroundColor:'blue'}
},
{
value:'camera',
icon:()=> ,
onPress:()=> setValue('camera'),
style:{backgroundColor:'blue'}
},
{
value:'add',
icon:()=> ,
onPress:()=> setValue('add'),
style:{backgroundColor:'blue'}
},
]
const segmentedEditButtons =[
{
value:'cancel',
icon:()=> ,
onPress:()=> handleActivateImageGrid('cancel'),
style:{backgroundColor:'blue'}
},
{
value:'delete',
icon:()=> ,
onPress:()=> setValue('delete'),
style:{backgroundColor:'red'}
},
]
```
#### Pass the buttons array to the buttons prop of the
```javascript
setValue(value)}
buttons={isEditingImages ? segmentedEditButtons: segmentedButtons}
/>
```
[segmented-buttons--rn-paper-issue.zip](https://github.com/user-attachments/files/24812911/segmented-buttons--rn-paper-issue.zip)
### Preview
https://snack.expo.dev/@gregpetropoulosdev/segmented-buttons--rn-paper-issue
https://github.com/user-attachments/assets/e1faf40f-aac7-4622-bf3a-2bc544fbf612
### Initial
### When a user presses edit button then the conditional logic runs and icons don't show up
### What have you tried so far?
- I have tried several different conditional logic configurations to eliminate the boolean logic was an issue.
- I swapped out the icons to eliminate the icons were the issue.
- I tried the same boolean logic, but in one array rather than two
### Your Environment
| software | version
| --------------------- | -------
| ios | iPhone 16 Pro
| android | Pixel 9 Pro
| react-native | 0.81.5
| react-native-paper | 5.14.5
| node | 24.12.0
| npm or yarn | 11.6.2
| expo sdk | 54.0.0
Contributor guide
Research direction
Start with the linked Snack and reproduce the issue by switching the SegmentedButtons buttons prop between the two conditional arrays. Then trace the SegmentedButtons implementation and its icon rendering path; done means the cancel and delete icons render after the array changes without affecting button functionality.
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
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100