1
1
# ` @react-native-community/segmented-control `
2
2
3
- ![ CircleCI branch] [ circle-ci-badge ] ![ npm] [ npm-badge ] [ ![ Lean Core Extracted] [ lean-core-badge ]] [ lean-core-issue ]
3
+ ![ Supports iOS and Android] [ support-badge ] ![ CircleCI branch] [ circle-ci-badge ] ![ npm] [ npm-badge ] [ ![ Lean Core Extracted] [ lean-core-badge ]] [ lean-core-issue ]
4
+
5
+ React Native SegmentedControl library. Use SegmentedControl to render a UISegmentedControl iOS.
6
+
7
+ For Android, it has a js implementation that mocks iOS 13 style of UISegmentedControl.
8
+
9
+ | iOS | Android |
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 " /> |
4
12
5
- React Native SegmentedControlIOS library. Use SegmentedControlIOS to render a UISegmentedControl iOS.
6
13
7
- <img src =" https://user-images.githubusercontent.com/6936373/71608757-dc6ef680-2bc6-11ea-85be-aa31f25ecf36.png " height =" 500 " />
8
14
9
15
## Getting started
10
16
@@ -49,14 +55,14 @@ import {SegmentedControlIOS} from 'react-native';
49
55
to:
50
56
51
57
``` javascript
52
- import SegmentedControlIOS from ' @react-native-community/segmented-control' ;
58
+ import SegmentedControl from ' @react-native-community/segmented-control' ;
53
59
```
54
60
55
61
## Usage
56
62
57
63
Start by importing the library:
58
64
59
- Use ` SegmentedControlIOS ` to render a UISegmentedControl iOS.
65
+ Use ` SegmentedControl ` to render a UISegmentedControl iOS.
60
66
61
67
#### Programmatically changing selected index
62
68
@@ -66,10 +72,10 @@ Note that the state variable would need to be updated as the user
66
72
selects a value and changes the index, as shown in the example below.
67
73
68
74
``` javascript
69
- import SegmentedControlIOS from ' @react-native-community/segmented-control' ;
75
+ import SegmentedControl from ' @react-native-community/segmented-control' ;
70
76
71
77
return (
72
- < SegmentedControlIOS
78
+ < SegmentedControl
73
79
values= {[' One' , ' Two' ]}
74
80
selectedIndex= {this .state .selectedIndex }
75
81
onChange= {(event ) => {
@@ -101,9 +107,9 @@ If false the user won't be able to interact with the control. Default value is t
101
107
102
108
If true, then selecting a segment won't persist visually. The ` onValueChange ` callback will still work as expected.
103
109
104
- | Type | Required |
105
- | ---- | -------- |
106
- | bool | No |
110
+ | Type | Required | Platform |
111
+ | ---- | -------- | ---- |
112
+ | bool | No | iOS |
107
113
108
114
---
109
115
@@ -190,9 +196,9 @@ The labels for the control's segment buttons, in order.
190
196
(iOS 13 only)
191
197
Overrides the control's appearance irrespective of the OS theme
192
198
193
- | Type | Required |
194
- | --------------- | -------- |
195
- | 'dark' | 'light' | No |
199
+ | Type | Required | Platform |
200
+ | --------------- | -------- | ---- |
201
+ | 'dark' | 'light' | No | iOS |
196
202
197
203
## Maintainers
198
204
@@ -211,3 +217,4 @@ The library is released under the MIT licence. For more information see [`LICENS
211
217
[ npm-badge ] : https://img.shields.io/npm/v/@react-native-community/segmented-control.svg?style=flat-square
212
218
[ lean-core-badge ] : https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square
213
219
[ lean-core-issue ] : https://github.com/facebook/react-native/issues/23313
220
+ [ support-badge ] :https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg?style=flat-square
0 commit comments