callstack / callstack/react-native-paper

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

Ouverte
#4,849 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
frontend, mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
58/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.