callstack / callstack/react-native-paper

Feat: Allow text styling in Segmented Button's label

Open
#4,091 1 comment 1 reaction 0 assignees View on GitHub
feature request SegmentedButtons
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

**Is your feature request related to a problem? Please describe.**

We would like to add support for 'rich text' to the [SegmentedButtons](https://callstack.github.io/react-native-paper/docs/components/SegmentedButtons/) control, so that parts of the text can be given a different font weight. This should also depend on selection state

**Describe the solution you'd like**

1. Change the type of the `label` property from `string` to `ReactNode`
2. Alternatively, add an optional `LabelComponent` or `renderLabel` callback that returns a react component, which is passed the relevant props. We'd also need a way to pass our custom 'sublabel' property then.

**Describe alternatives you've considered**

- Copy / pasting the component into our own project and making the adjustments ourselves, but there's a lot of internal dependencies that we'd have to copy as well.

**Additional context**

Here's what our designer would like to see possible:

![image](https://github.com/callstack/react-native-paper/assets/394435/642457ff-e040-47b6-a663-9bcd7a6f01ed)

Note the bold "Stroom" vs the regular "(kWh)"

And more variants, with and without icons, selected / deselected, and disabled states:

![image](https://github.com/callstack/react-native-paper/assets/394435/51241d77-4339-4688-be70-2a89dd4b61e4)

All these are mostly possible already, bar the bold text style. For now we'll give feedback to the developer that it's not possible yet. I can have a go at submitting a PR myself if I can find some headspace to work on it.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.