callstack / callstack/react-native-paper

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

未关闭
#4,849 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

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

贡献指南

打开贡献指南

调研方向

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.

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
58/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。