-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Open
Labels
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
const segmentedButtons =[
{
value:'edit',
icon:()=> <MaterialIcons name='edit' color={'white'} size={24}/>,
onPress:()=> handleActivateImageGrid('edit'),
style:{backgroundColor:'blue'}
},
{
value:'camera',
icon:()=> <MaterialIcons name='camera-enhance' color={'white'} size={24}/>,
onPress:()=> setValue('camera'),
style:{backgroundColor:'blue'}
},
{
value:'add',
icon:()=> <MaterialIcons name='add-photo-alternate' color={'white'} size={24}/>,
onPress:()=> setValue('add'),
style:{backgroundColor:'blue'}
},
]
const segmentedEditButtons =[
{
value:'cancel',
icon:()=> <MaterialIcons name='cancel' color={'white'} size={24}/>,
onPress:()=> handleActivateImageGrid('cancel'),
style:{backgroundColor:'blue'}
},
{
value:'delete',
icon:()=> <MaterialIcons name='delete' color={'red'} size={24}/>,
onPress:()=> setValue('delete'),
style:{backgroundColor:'red'}
},
]Pass the buttons array to the buttons prop of the <SegmentedButton otherProps={...} buttons=[conditional logic here] />
<SegmentedButtons
value={value}
onValueChange={(value)=> setValue(value)}
buttons={isEditingImages ? segmentedEditButtons: segmentedButtons}
/>segmented-buttons--rn-paper-issue.zip
Preview
https://snack.expo.dev/@gregpetropoulosdev/segmented-buttons--rn-paper-issue
Screen.Recording.2026-01-22.at.11.38.01.PM.mov
Initial
When a user presses edit button then the conditional logic runs and icons don't show up
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 |