callstack / callstack/react-native-paper
Multiline text in SegmentedButtonItem
- 主要言語
- TypeScript
- スター
- 14.5k
- フォーク
- 2.2k
- 平均マージ
- 5日 23時間
- マージ済み PR(30日)
- 12
説明
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).
コントリビューションガイド
調査の方向性
src/components/SegmentedButtons/SegmentedButtonItem.tsx から始め、報告されたパッチを現在のコンポーネントの props とレイアウトと比較します。SegmentedButtonItem が複数行のラベルをサポートし、関連するテキストおよび TouchableRipple の props のオプションを公開すれば、作業は完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile
- issue の種類
- 機能追加
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100