@@ -6,11 +6,9 @@ React Native SegmentedControl library. Use SegmentedControl to render a UISegmen
6
6
7
7
For Android and Web, it has a js implementation that mocks iOS 13 style of UISegmentedControl.
8
8
9
- | iOS | Android | Web |
10
- | --- | ---- | --- |
11
- | <img src =" https://user-images.githubusercontent.com/6936373/71608757-dc6ef680-2bc6-11ea-85be-aa31f25ecf36.png " width =" 320 " /> | <img src =" https://user-images.githubusercontent.com/6936373/79550655-9edd9d00-80d3-11ea-98bf-8b7c0b0798d3.png " width =" 320 " /> | <img src =" https://user-images.githubusercontent.com/6936373/79590620-3f52b200-8112-11ea-863b-236c4465fba6.png " width =" 640 " /> |
12
-
13
-
9
+ | iOS | Android | Web |
10
+ | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
11
+ | <img src =" https://user-images.githubusercontent.com/6936373/71608757-dc6ef680-2bc6-11ea-85be-aa31f25ecf36.png " width =" 320 " /> | <img src =" https://user-images.githubusercontent.com/6936373/79550655-9edd9d00-80d3-11ea-98bf-8b7c0b0798d3.png " width =" 320 " /> | <img src =" https://user-images.githubusercontent.com/6936373/79590620-3f52b200-8112-11ea-863b-236c4465fba6.png " width =" 640 " /> |
14
12
15
13
## Getting started
16
14
@@ -108,8 +106,8 @@ If false the user won't be able to interact with the control. Default value is t
108
106
If true, then selecting a segment won't persist visually. The ` onValueChange ` callback will still work as expected.
109
107
110
108
| Type | Required | Platform |
111
- | ---- | -------- | ---- |
112
- | bool | No | iOS |
109
+ | ---- | -------- | -------- |
110
+ | bool | No | iOS |
113
111
114
112
---
115
113
@@ -153,26 +151,6 @@ Accent color of the control.
153
151
154
152
---
155
153
156
- ### ` textColor `
157
-
158
- Text color of the control. (iOS 13+ only)
159
-
160
- | Type | Required | Supported Version |
161
- | ------ | -------- | ----------------- |
162
- | string | No | iOS 13+ |
163
-
164
- ---
165
-
166
- ### ` activeTextColor `
167
-
168
- Text color of the active control. (iOS 13+ only)
169
-
170
- | Type | Required | Supported Version |
171
- | ------ | -------- | ----------------- |
172
- | string | No | iOS 13+ |
173
-
174
- ---
175
-
176
154
### ` backgroundColor `
177
155
178
156
Background color color of the control. (iOS 13+ only)
@@ -193,12 +171,36 @@ The labels for the control's segment buttons, in order.
193
171
194
172
### ` appearance `
195
173
196
- (iOS 13 only)
174
+ (iOS 13+ only)
197
175
Overrides the control's appearance irrespective of the OS theme
198
176
199
177
| Type | Required | Platform |
200
- | --------------- | -------- | ---- |
201
- | 'dark' | 'light' | No | iOS |
178
+ | --------------- | -------- | -------- |
179
+ | 'dark', 'light' | No | iOS |
180
+
181
+ ### ` fontStyle `
182
+
183
+ (iOS 13+ only)
184
+ | Type | Required | Platform |
185
+ | ------ | -------- | -------- |
186
+ | object | No | iOS, Android |
187
+
188
+ An object container
189
+
190
+ - ` color ` : color of segment text
191
+ - ` fontSize ` : font-size of segment text
192
+ - ` fontFamily ` : font-family of segment text
193
+
194
+ ### ` activeFontStyle `
195
+
196
+ (iOS 13+ only)
197
+ | Type | Required | Platform |
198
+ | ------ | -------- | -------- |
199
+ | object | No | iOS, Android |
200
+
201
+ - ` color ` : overrides color of selected segment text
202
+ - ` fontSize ` : overrides font-size of selected segment text
203
+ - ` fontFamily ` : overrides font-family of selected segment text
202
204
203
205
## Maintainers
204
206
@@ -217,4 +219,4 @@ The library is released under the MIT licence. For more information see [`LICENS
217
219
[ npm-badge ] : https://img.shields.io/npm/v/@react-native-community/segmented-control.svg?style=flat-square
218
220
[ lean-core-badge ] : https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square
219
221
[ lean-core-issue ] : https://github.com/facebook/react-native/issues/23313
220
- [ support-badge ] :https://img.shields.io/badge/platforms-android%20|%20ios%20|%20web-lightgrey.svg?style=flat-square
222
+ [ support-badge ] : https://img.shields.io/badge/platforms-android%20|%20ios%20|%20web-lightgrey.svg?style=flat-square
0 commit comments