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

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.