Skip to content

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

@GregPetropoulos

Description

@GregPetropoulos

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions