callstack / callstack/react-native-paper

on Expo 54, SegmentedButtons buttons prop conditional rendering does not render <MaterialCommunity/> icon

Open
#4,849 2 comments 0 reactions 0 assignees View on GitHub
bug
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

Image

### When a user presses edit button then the conditional logic runs and icons don't show up

Image

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.