callstack / callstack/react-native-paper

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

Đang mở
#4,849 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
frontend, mobile
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
58/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.