callstack / callstack/react-native-paper
Feat: Allow text styling in Segmented Button's label
- 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:

Note the bold "Stroom" vs the regular "(kWh)"
And more variants, with and without icons, selected / deselected, and disabled states:

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
Assessment
This issue has not been assessed yet.