https://github.com/csath/react-native-segment-controller
A react-native segment controller(Tab) for both ios and android.
https://github.com/csath/react-native-segment-controller
android ios react-native segmentcontrol segmented-controls tabbar tabbarcontroller tabs
Last synced: 3 months ago
JSON representation
A react-native segment controller(Tab) for both ios and android.
- Host: GitHub
- URL: https://github.com/csath/react-native-segment-controller
- Owner: csath
- License: mit
- Created: 2017-12-03T07:32:48.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-07T14:48:21.000Z (almost 7 years ago)
- Last Synced: 2025-05-27T04:42:43.582Z (9 months ago)
- Topics: android, ios, react-native, segmentcontrol, segmented-controls, tabbar, tabbarcontroller, tabs
- Language: JavaScript
- Size: 82.4 MB
- Stars: 18
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-segment-controller [](https://badge.fury.io/js/react-native-segment-controller)
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.
# Demo
# Installation
```
yarn add react-native-segment-controller or npm install --save react-native-segment-controller
```
# Usage
```js
import SegmentControl from 'react-native-segment-controller';
{}}
borderRadius={5}
/>
```
# Prop-types
| Prop name |Type |
| ------------- | ------------- |
| values | list - list of names for Tabs |
| badges | list - list of integers matching to defined tab names corresponding to indicate any badge count need to be specified |
| onTabPress | function - this returns the selected tab index |
| selectedIndex | int - indicates the selected tab index corresponding to given values list |
| tabsContainerStyle | int - radius of the container |
| tabBadgeContainerStyle | object - styles for view |
| activeTabBadgeContainerStyle | object - styles for view |
| tabBadgeStyle | object - styles for view |
| activeTabBadgeStyle | object - styles for view |
| borderRadius | int - radius of the container |
| tabStyle | object - styles for view |
| activeTabStyle | object - styles for view |
| tabTextStyle | object - styles for Text |
| activeTabTextStyle | object - styles for Text |
| height | int - height in number of pixels |
# Example
checkout sample directory and findout a react-native app.
First run ``` npm install or yarn```
then run
```
react-native run-android or react-native run-ios
```
Created by @ Chanaka Athurugiriya