Support for icons?

[cmmartin]

Feature Request

Currently the values prop accepts an array of strings to display as the label. I'd like to use icons instead. This should be supported on the native side. See the below in Safari -> Bookmarks

Possible implementation

Code sample

I'm not sure how this would work on the native side yet, but we can add a renderLabel prop, so you could do...

const renderLabel = value => <Icon name={icons[value]} />

<SegmentedControl values={['foo', 'bar', 'baz']} renderLabel={renderLabel} />

Any workarounds or thoughts on the native implementation are appreciated

[Naturalclar]

It seems like it is possible to implement image in the UISegmentedControl
based on this SO question https://stackoverflow.com/questions/10480087/uisegmentedcontrol-selected-state-icon-image

currently I don't have much time to look into this, but any PR is appreciated :)

[Naturalclar]

Note to myself.
This PR might help on how to add icon to segmented-control
facebook/react-native#28646

[tuanmai]

@Naturalclar Do you have any prefer api for this feature? AFAIK, UISegmentedControl support text and image, so it cannot be react component. I need this feature so I'm considering working on it.

[Naturalclar]

@tuanmai thanks for the comment! I don't have any preferred api at the moment.

[andresain123]

Hi folks! We are making a new app and we also needed support for images. I’ve just finished a working implementation on the native part. I’m thinking of opening a PR in the next days for supporting images.

Cheers!

[Naturalclar]

Just published v2.1.0 with added support for images. Thanks so much @andresain123 🎉

[amirbhz86]

I created a fork using the react-native-segmented-control module and incorporated support for including both text and images, following this format:

Fork address : https://github.com/amirbhz86/segmented-control

<SegmentedControl selectedIndex={0} values={[ require('./add.png'), require('./add.png'), require('./add.png)]} iconTexts={["One", "Two", "Three"]} />