Skip to content

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

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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions