UNPKG

2.86 kBMarkdownView Raw
1# React Navigation Tabs
2
3[![Build Status][build-badge]][build]
4[![Version][version-badge]][package]
5[![MIT License][license-badge]][license]
6
7Tab navigators for React Navigation.
8
9## Installation
10
11Follow 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.
12
13## Usage
14
15The package exports two different navigators:
16
17- `createBottomTabNavigator`: iOS like bottom tabs.
18- `createMaterialTopTabNavigator`: Material design themed top tabs with swipe gesture, from [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view).
19
20You can import individual navigators and use them:
21
22```js
23import { createBottomTabNavigator } from 'react-navigation-tabs';
24
25export default createBottomTabNavigator({
26 Album: { screen: Album },
27 Library: { screen: Library },
28 History: { screen: History },
29 Cart: { screen: Cart },
30});
31```
32
33You 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:
34
35- `createMaterialBottomTabNavigator`: Material design themed animated bottom tabs, from [react-native-paper](https://callstack.github.io/react-native-paper/bottom-navigation.html).
36
37```js
38import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
39
40export default createMaterialBottomTabNavigator(
41 {
42 Album: { screen: Album },
43 Library: { screen: Library },
44 History: { screen: History },
45 Cart: { screen: Cart },
46 },
47 {
48 initialRouteName: 'Album',
49 activeTintColor: '#F44336',
50 },
51);
52```
53
54## Development workflow
55
56To setup the development environment, open a Terminal in the repo directory and run the following:
57
58```sh
59yarn bootstrap
60```
61
62While developing, you can run the example app with [Expo](https://expo.io/) to test your changes:
63
64```sh
65yarn example start
66```
67
68Make sure your code passes TypeScript and ESLint. Run the following to verify:
69
70```sh
71yarn typescript
72yarn lint
73```
74
75To fix formatting errors, run the following:
76
77```sh
78yarn lint --fix
79```
80
81## Docs
82
83- [`createBottomTabNavigator`](https://reactnavigation.org/docs/en/bottom-tab-navigator.html)
84- [`createMaterialTopTabNavigator`](https://reactnavigation.org/docs/en/material-top-tab-navigator.html)
85
86<!-- badges -->
87[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/tabs/master.svg?style=flat-square
88[build]: https://circleci.com/gh/react-navigation/tabs
89[version-badge]: https://img.shields.io/npm/v/react-navigation-tabs.svg?style=flat-square
90[package]: https://www.npmjs.com/package/react-navigation-tabs
91[license-badge]: https://img.shields.io/npm/l/react-navigation-tabs.svg?style=flat-square
92[license]: https://opensource.org/licenses/MIT