https://github.com/ptomasroos/react-native-tab-navigator

A tab bar that switches between scenes, written in JS for cross-platform support
https://github.com/ptomasroos/react-native-tab-navigator

Last synced: 24 days ago
JSON representation

A tab bar that switches between scenes, written in JS for cross-platform support

• Host: GitHub
• URL: https://github.com/ptomasroos/react-native-tab-navigator
• Owner: ptomasroos
• License: mit
• Created: 2015-08-25T05:29:24.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-09-30T10:48:16.000Z (over 3 years ago)
• Last Synced: 2024-04-14T12:04:07.063Z (3 months ago)
• Language: JavaScript
• Size: 199 KB
• Stars: 2,404
• Watchers: 83
• Forks: 415
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Lists

• react-native-awesome - react-native-tab-navigator

README

        
# TabNavigator

A tab bar that switches between scenes, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.16 and newer.

The look and feel is slightly different than the native navigator but it is better in some ways. Also it is pure JavaScript.

Note: This is **not** the same `TabNavigation` component that is used in [ExNavigation](https://github.com/exponentjs/ex-navigation), the API and implementations are slightly different -- react-native-tab-navigator stands on its own and does not depend on any other navigation library.

## Demo

For demo, please check the example folder



Install

-------

Make sure that you are in your React Native project directory and run:

```npm install react-native-tab-navigator --save```

## Usage

Import TabNavigator as a JavaScript module:

```js

import TabNavigator from 'react-native-tab-navigator';

```

This is an example of how to use the component and some of the commonly used props that it supports:

```js

   }

    renderSelectedIcon={() => }

    badgeText="1"

    onPress={() => this.setState({ selectedTab: 'home' })}>

    {homeView}

  

   }

    renderSelectedIcon={() => }

    renderBadge={() => }

    onPress={() => this.setState({ selectedTab: 'profile' })}>

    {profileView}

  

```

See TabNavigatorItem's supported props for more info.

### Hiding the Tab Bar

You can hide the tab bar by using styles. For example:

```js

let tabBarHeight = 0;

```

### Props

TabNavigator props

| prop | default | type | description |

| ---- | ---- | ----| ---- |

| sceneStyle | inherited | object (style) | define for rendered scene |

| tabBarStyle | inherited | object (style) | define style for TabBar |

| tabBarShadowStyle | inherited | object (style) | define shadow style for tabBar |

| hidesTabTouch | false | boolean | disable onPress opacity for Tab |

TabNavigator.Item props

| prop | default | type | description |

| ---- | ---- | ----| ---- |

| renderIcon | none | function | returns Item icon |

| renderSelectedIcon | none | function | returns selected Item icon |

| badgeText | none | string or number | text for Item badge |

| renderBadge | none | function | returns Item badge |

| title | none | string | Item title |

| titleStyle | inherited | style | styling for Item title |

| selectedTitleStyle | none | style | styling for selected Item title |

| tabStyle | inherited | style | styling for tab |

| selected | none | boolean | return whether the item is selected |

| onPress | none | function | onPress method for Item |

| allowFontScaling | false | boolean | allow font scaling for title |

| accessible | none | boolean | indicates if this item is an accessibility element |

| accessibilityLabel | none | string | override text for screen readers |

| testID | none | string | used to locate this item in end-to-end-tests |