Skip to content

Commit 92cf6f0

Browse files
authored
docs: add screenshot of android implementation (#66)
1 parent cdce6a5 commit 92cf6f0

File tree

1 file changed

+20
-13
lines changed

1 file changed

+20
-13
lines changed

README.md

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
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';
4955
to:
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

5763
Start 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
6672
selects 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

7177
return (
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

102108
If 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)
191197
Overrides 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

Comments
 (0)