Skip to content

Commit 30c5c1e

Browse files
authored
Merge branch 'master' into fix/vul
2 parents dc82afe + e3451ca commit 30c5c1e

File tree

1 file changed

+55
-2
lines changed

1 file changed

+55
-2
lines changed

README.md

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,57 @@
1-
# react-native-segment-controller
2-
A react-native segment controller(Tab) for both ios and android.
1+
# react-native-segment-controller [![npm version](https://badge.fury.io/js/react-native-segment-controller.svg)](https://badge.fury.io/js/react-native-segment-controller)
2+
A react-native segment controller for both android and ios. You can define any number of tabs or segemnts and this will automatically adjust according to the wrapped view's width. You can also add badge count to specify any integer to user.
3+
4+
# Demo
5+
6+
![Alt text](/screenshots/1.gif?raw=true "segment-controller")
7+
8+
# Installation
9+
```
10+
yarn add react-native-segment-controller or npm install --save react-native-segment-controller
11+
```
12+
13+
# Usage
14+
```js
15+
import SegmentControl from 'react-native-segment-controller';
16+
17+
<SegmentControl
18+
values={['One', 'Two', 'Three', 'Four']}
19+
badges={[0, 5, 0, 2]}
20+
selectedIndex={0}
21+
height={30}
22+
onTabPress={() => {}}
23+
borderRadius={5}
24+
/>
25+
```
26+
# Prop-types
27+
28+
| Prop name |Type |
29+
| ------------- | ------------- |
30+
| values | list - list of names for Tabs |
31+
| badges | list - list of integers matching to defined tab names corresponding to indicate any badge count need to be specified |
32+
| onTabPress | function - this returns the selected tab index |
33+
| selectedIndex | int - indicates the selected tab index corresponding to given values list |
34+
| tabsContainerStyle | int - radius of the container |
35+
| tabBadgeContainerStyle | object - styles for view |
36+
| activeTabBadgeContainerStyle | object - styles for view |
37+
| tabBadgeStyle | object - styles for view |
38+
| activeTabBadgeStyle | object - styles for view |
39+
| borderRadius | int - radius of the container |
40+
| tabStyle | object - styles for view |
41+
| activeTabStyle | object - styles for view |
42+
| tabTextStyle | object - styles for Text |
43+
| activeTabTextStyle | object - styles for Text |
44+
| height | int - height in number of pixels |
45+
46+
# Example
47+
48+
checkout sample directory and findout a react-native app.
49+
First run ``` npm install or yarn```
50+
51+
then run
52+
```
53+
react-native run-android or react-native run-ios
54+
```
355

456
Created by @ Chanaka Athurugiriya
57+

0 commit comments

Comments
 (0)