11# ` @react-native-community/segmented-control `
22
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 " /> |
412
5- React Native SegmentedControlIOS library. Use SegmentedControlIOS to render a UISegmentedControl iOS.
613
7- <img src =" https://user-images.githubusercontent.com/6936373/71608757-dc6ef680-2bc6-11ea-85be-aa31f25ecf36.png " height =" 500 " />
814
915## Getting started
1016
@@ -49,14 +55,14 @@ import {SegmentedControlIOS} from 'react-native';
4955to:
5056
5157``` javascript
52- import SegmentedControlIOS from ' @react-native-community/segmented-control' ;
58+ import SegmentedControl from ' @react-native-community/segmented-control' ;
5359```
5460
5561## Usage
5662
5763Start by importing the library:
5864
59- Use ` SegmentedControlIOS ` to render a UISegmentedControl iOS.
65+ Use ` SegmentedControl ` to render a UISegmentedControl iOS.
6066
6167#### Programmatically changing selected index
6268
@@ -66,10 +72,10 @@ Note that the state variable would need to be updated as the user
6672selects a value and changes the index, as shown in the example below.
6773
6874``` javascript
69- import SegmentedControlIOS from ' @react-native-community/segmented-control' ;
75+ import SegmentedControl from ' @react-native-community/segmented-control' ;
7076
7177return (
72- < SegmentedControlIOS
78+ < SegmentedControl
7379 values= {[' One' , ' Two' ]}
7480 selectedIndex= {this .state .selectedIndex }
7581 onChange= {(event ) => {
@@ -101,9 +107,9 @@ If false the user won't be able to interact with the control. Default value is t
101107
102108If true, then selecting a segment won't persist visually. The ` onValueChange ` callback will still work as expected.
103109
104- | Type | Required |
105- | ---- | -------- |
106- | bool | No |
110+ | Type | Required | Platform |
111+ | ---- | -------- | ---- |
112+ | bool | No | iOS |
107113
108114---
109115
@@ -190,9 +196,9 @@ The labels for the control's segment buttons, in order.
190196(iOS 13 only)
191197Overrides the control's appearance irrespective of the OS theme
192198
193- | Type | Required |
194- | --------------- | -------- |
195- | 'dark' | 'light' | No |
199+ | Type | Required | Platform |
200+ | --------------- | -------- | ---- |
201+ | 'dark' | 'light' | No | iOS |
196202
197203## Maintainers
198204
@@ -211,3 +217,4 @@ The library is released under the MIT licence. For more information see [`LICENS
211217[ npm-badge ] : https://img.shields.io/npm/v/@react-native-community/segmented-control.svg?style=flat-square
212218[ lean-core-badge ] : https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square
213219[ 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