# @xiaolongshen/react-native-segment-tab

> segment-tab looks like ios component

Latest version **0.1.2** (published 2019-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xiaolongshen/react-native-segment-tab
pnpm add @xiaolongshen/react-native-segment-tab
yarn add @xiaolongshen/react-native-segment-tab
bun add @xiaolongshen/react-native-segment-tab
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-05-08 |
| First published | 2019-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | poberwong |
| Maintainers | xiaolongshen |

## Links

- npm: https://www.npmjs.com/package/@xiaolongshen/react-native-segment-tab
- Repository: https://github.com/pxchenxi/react-native-segment-tab
- Homepage: https://github.com/Bob1993/react-native-segment-tab#readme
- Issues: https://github.com/Bob1993/react-native-segment-tab/issues
- npm.io page: https://npm.io/package/@xiaolongshen/react-native-segment-tab

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Recent versions

- 0.1.2 (latest) — 2019-05-08
- 0.1.1 — 2019-04-24

## README

# react-native-segment-tab(for Android/iOS)
segment-tab looks like ios component

![](http://ww2.sinaimg.cn/large/005zU9b3gw1f642kp0hzgj30af0iidg2.jpg)

## Install
`npm install react-native-segment-tab --save`

## Usage
```
  state = {
    selected: 0
  }
  render() {
    return (
      <View style={styles.container}>
        <SegmentTab
          data={['Day1', 'Day2', 'Day3']}
          selected={this.state.selected}
          onPress={ index => this.setState({selected: index})}
        />
        <SegmentTab
          style={{marginTop: 40}}
          activeColor='#4078bf'
          selected={this.state.selected}
          onPress={ index => this.setState({selected: index})}
          orientation='vertical'
        />
      </View>
    );
  }
```
## Props
 Name | Description | Default | Type
------|-------------|----------|-----------
data | titles of tabs  | `['One', 'Two', 'Three']` | array
titleSize  | fontSize for each title | `14`| number
orientation | direction of tabs | `vertical` or `horizontal` | string
horizontalWidth | width of tab when tab is horizontal layout| `200` | number
horizontalHeight | height of tab when tab is horizontal layout| `40` | number
verticalWidth | width of tab when tab is vertical layout| `100` | number
verticallHeight | height of tab when tab is vertical layout| `120` | number
borderRadius | borderRadius of whole tab | 5 | number
borderColor  | borderColor of whole tab | gray | string
activeColor | color of an active tab item | `red`| string
inActiveColor | color of an inActive tab item, it will be color of its parent's backgroundColor if is null | null | string
textActiveColor | text of color in active tab | inActiveColor | string
textInActiveColor | text of color in inactive tab | activeColor | string
selected | index of selected tab item | 0 | number
tyle | you can add external for tab | null | View.propTypes.style
onPress | call-back function for each item | () => {} | func

## Notice:
  * Following idea of stateless component, `react-native-segment-tab` is designed without internal state, so you have to use `selected` and `onPress` props to response your interaction.
  * You'd better use the component with a wrapper view because segment-tab is a pure component.
  * If you have any question, just create [issues](https://github.com/Bob1993/react-native-segment-tab/issues) or send email to me: <poberwong@gmail.com>.
  
## License  
*MIT*

---
_Source: https://npm.io/package/@xiaolongshen/react-native-segment-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._