# react-native-xtabbar

> mobile bottom tabbar using react-native

Latest version **0.2.1** (published 2016-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-xtabbar
pnpm add react-native-xtabbar
yarn add react-native-xtabbar
bun add react-native-xtabbar
```

## 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.2.1 |
| Published | 2016-05-23 |
| First published | 2016-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 98 |
| Author | chon |
| Maintainers | chon |
| Keywords | react-component, react-native, ios, android, tabbar, nav |

## Links

- npm: https://www.npmjs.com/package/react-native-xtabbar
- Repository: https://github.com/ngstyle/react-native-tabBar
- Homepage: https://github.com/ngstyle/react-native-tabBar#readme
- Issues: https://github.com/ngstyle/react-native-tabBar/issues
- npm.io page: https://npm.io/package/react-native-xtabbar

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2016-05-23
- 0.2.0 — 2016-05-18
- 0.1.8 — 2016-05-10
- 0.1.7 — 2016-04-25
- 0.1.6 — 2016-04-25
- 0.1.5 — 2016-04-21
- 0.1.4 — 2016-04-21
- 0.1.3 — 2016-04-21
- 0.1.2 — 2016-04-20
- 0.1.1 — 2016-04-20
- 0.1.0 — 2016-04-20

## README

## Overview
Mobile bottom tab bar using react-native,support android and ios.
Pages won't be rendered when you switch to other tabs,also save the status of invisible pages.

## Installation

First you need to install react-native-xtabbar:

```javascript
npm install react-native-xtabbar --save
```

## Props

### Tabbar

| prop | value | required/optional | comment |
| --- | --- | --- | --- |
| onItemSelected | function | optional | this function will be called when the focus item changing |
| navTextColor | color | optional | nav text normal color |
| navTextColorSelected | color | optional | nav text selected color |

### Tabbar.Item

| prop | value | required/optional | comment |
| --- | --- | --- | --- |
| icon | image source | required | the icon when item is not focus |
| selectedIcon | image source | required | the icon when item is focus |
| title | string | required | title of item |
| onPress | function | optional | the function will be called when item is selected. you can also use Tabbar's onItemSelected function if you want to control press callback in one place. |
| badge | number/string | optional | badge |
| point (Thanks [@WittBulter](https://github.com/WittBulter)) | bool | optional | clipChildren performance |

## Usage

```javascript
import TabBar from 'react-native-xtabbar';

<TabBar
    style={styles.content}
    onItemSelected={(index) => {console.log(`current item's index is ${index}`);}}
>
    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        onPress={() => {
            // do sth
        }}
        badge={7}
        title='首页'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Home</Text>
        </View>
    </TabBar.Item>

    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        title='定位'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Location</Text>
        </View>
    </TabBar.Item>

    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        title='发现'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Find</Text>
        </View>
    </TabBar.Item>

    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        title='我'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Me</Text>
        </View>
    </TabBar.Item>
</TabBar>

```
## TODO
~~TabBar.Item badge~~

## Screenshot
![](https://github.com/ngstyle/react-native-tabBar/raw/master/screenshot/screenshot_ios.jpg)
![](https://github.com/ngstyle/react-native-tabBar/raw/master/screenshot/screenshot_android.jpg)

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