1 | # React Navigation Tabs
|
2 |
|
3 | [![Build Status][build-badge]][build]
|
4 | [![Version][version-badge]][package]
|
5 | [![MIT License][license-badge]][license]
|
6 |
|
7 | Tab navigators for React Navigation.
|
8 |
|
9 | ## Installation
|
10 |
|
11 | 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.
|
12 |
|
13 | ## Usage
|
14 |
|
15 | The 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 |
|
20 | You can import individual navigators and use them:
|
21 |
|
22 | ```js
|
23 | import { createBottomTabNavigator } from 'react-navigation-tabs';
|
24 |
|
25 | export default createBottomTabNavigator({
|
26 | Album: { screen: Album },
|
27 | Library: { screen: Library },
|
28 | History: { screen: History },
|
29 | Cart: { screen: Cart },
|
30 | });
|
31 | ```
|
32 |
|
33 | 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:
|
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
|
38 | import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
|
39 |
|
40 | export 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 |
|
56 | To setup the development environment, open a Terminal in the repo directory and run the following:
|
57 |
|
58 | ```sh
|
59 | yarn bootstrap
|
60 | ```
|
61 |
|
62 | While developing, you can run the example app with [Expo](https://expo.io/) to test your changes:
|
63 |
|
64 | ```sh
|
65 | yarn example start
|
66 | ```
|
67 |
|
68 | Make sure your code passes TypeScript and ESLint. Run the following to verify:
|
69 |
|
70 | ```sh
|
71 | yarn typescript
|
72 | yarn lint
|
73 | ```
|
74 |
|
75 | To fix formatting errors, run the following:
|
76 |
|
77 | ```sh
|
78 | yarn 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 |
|
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
|