callstack / callstack/react-native-paper

Multiline text in SegmentedButtonItem

Offen
#4,452 1 Kommentar 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.2k
Ø Merge
5 T. 23 Std.
Gemergte PRs (30 T.)
12

Beschreibung

Hi! 👋

Firstly, thanks for your work on this project! 🙂
Today I used [patch-package](https://github.com/ds300/patch-package) to patch `react-native-paper@5.12.3` for the project I'm working on.

I needed multiline text in `SegmentedButtonItem`. So i removed `numberOfLines` and vertically centered `TouchableRipple`'s content. Would be nice to have option to change those props in next versions.

Here is the diff that solved my problem:

```diff
diff --git a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index d88f2a4..600859e 100644
--- a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -214,7 +214,10 @@ const SegmentedButtonItem = ({
disabled={disabled}
rippleColor={rippleColor}
testID={testID}
- style={rippleStyle}
+ style={[rippleStyle, {
+ flex: 1,
+ justifyContent: 'center'
+ }]}
background={background}
theme={theme}
>
@@ -236,7 +239,6 @@ const SegmentedButtonItem = ({
variant="labelLarge"
style={[styles.label, labelTextStyle, labelStyle]}
selectable={false}
- numberOfLines={1}
maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
testID={`${testID}-label`}
>
```

This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.