# react-navigation-tabs

> Tab Navigation components for React Navigation

Latest version **2.11.2** (published 2022-02-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-navigation-tabs
pnpm add react-navigation-tabs
yarn add react-navigation-tabs
bun add react-navigation-tabs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.11.2 |
| Published | 2022-02-02 |
| First published | 2018-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 322.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 327 |
| Author | Satyajit Sahoo |
| Maintainers | ericvicenti, brentvatne, satya164, osdnk |
| Keywords | react-native-component, react-component, react-native, ios, android, tab, swipe, scrollable, coverflow |

## Links

- npm: https://www.npmjs.com/package/react-navigation-tabs
- Repository: https://github.com/react-navigation/tabs
- Homepage: https://github.com/react-navigation/tabs#readme
- Issues: https://github.com/react-navigation/tabs/issues
- npm.io page: https://npm.io/package/react-navigation-tabs

## Dependencies (4)

- [react-native-tab-view](https://npm.io/package/react-native-tab-view.md) ^2.15.2
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2
- [react-lifecycles-compat](https://npm.io/package/react-lifecycles-compat.md) ^3.0.4
- [react-native-iphone-x-helper](https://npm.io/package/react-native-iphone-x-helper.md) ^1.3.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.11.2 (latest) — 2022-02-02
- 1.2.0-alpha.0 (next) — 2019-08-13
- 2.11.1 — 2021-04-24
- 2.11.0 — 2021-02-21
- 2.10.1 — 2020-10-28
- 2.10.0 — 2020-10-26
- 2.9.2 — 2020-10-02
- 2.9.1 — 2020-09-24
- 2.9.0 — 2020-06-25
- 2.8.13 — 2020-04-30
- 2.8.12 — 2020-04-22
- 2.8.11 — 2020-04-02
- 2.8.10 — 2020-03-31
- 2.8.9 — 2020-03-28
- 2.8.8 — 2020-03-27
- … 67 more at https://npm.io/package/react-navigation-tabs/versions

## README

# React Navigation Tabs

[![Build Status][build-badge]][build]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]

Tab navigators for React Navigation.

## Installation

Follow the instructions on the [the React Navigation "Getting Started" guide](https://reactnavigation.org/docs/en/getting-started.html), and then add the `react-navigation-tabs` package to your project.

## Usage

The package exports two different navigators:

- `createBottomTabNavigator`: iOS like bottom tabs.
- `createMaterialTopTabNavigator`: Material design themed top tabs with swipe gesture, from [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view).

You can import individual navigators and use them:

```js
import { createBottomTabNavigator } from 'react-navigation-tabs';

export default createBottomTabNavigator({
  Album: { screen: Album },
  Library: { screen: Library },
  History: { screen: History },
  Cart: { screen: Cart },
});
```

You can install another package, [`react-navigation-material-bottom-tabs`](https://github.com/react-navigation/material-bottom-tabs), to use a third type of tab navigator:

- `createMaterialBottomTabNavigator`: Material design themed animated bottom tabs, from [react-native-paper](https://callstack.github.io/react-native-paper/bottom-navigation.html).

```js
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

export default createMaterialBottomTabNavigator(
  {
    Album: { screen: Album },
    Library: { screen: Library },
    History: { screen: History },
    Cart: { screen: Cart },
  },
  {
    initialRouteName: 'Album',
    activeTintColor: '#F44336',
  },
);
```

## Development workflow

To setup the development environment, open a Terminal in the repo directory and run the following:

```sh
yarn bootstrap
```

While developing, you can run the example app with [Expo](https://expo.io/) to test your changes:

```sh
yarn example start
```

Make sure your code passes TypeScript and ESLint. Run the following to verify:

```sh
yarn typescript
yarn lint
```

To fix formatting errors, run the following:

```sh
yarn lint --fix
```

## Docs

- [`createBottomTabNavigator`](https://reactnavigation.org/docs/en/bottom-tab-navigator.html)
- [`createMaterialTopTabNavigator`](https://reactnavigation.org/docs/en/material-top-tab-navigator.html)

<!-- badges -->
[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/tabs/master.svg?style=flat-square
[build]: https://circleci.com/gh/react-navigation/tabs
[version-badge]: https://img.shields.io/npm/v/react-navigation-tabs.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-navigation-tabs
[license-badge]: https://img.shields.io/npm/l/react-navigation-tabs.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT

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