https://github.com/react-navigation/material-bottom-tabs

A Material Design bottom tab navigator for React Navigation
https://github.com/react-navigation/material-bottom-tabs

Last synced: 2 days ago
JSON representation

A Material Design bottom tab navigator for React Navigation

• Host: GitHub
• URL: https://github.com/react-navigation/material-bottom-tabs
• Owner: react-navigation
• License: mit
• Archived: true
• Created: 2018-05-04T16:45:06.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-25T11:25:58.000Z (over 4 years ago)
• Last Synced: 2024-04-14T04:19:55.622Z (7 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.64 MB
• Stars: 175
• Watchers: 10
• Forks: 39
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
This package has been moved to https://github.com/react-navigation/react-navigation/tree/4.x/packages/material-bottom-tabs

---

# React Navigation Material Bottom Tabs

Bottom Navigation component following [Material design guidelines](https://material.io/design/components/bottom-navigation.html) to use with React Navigation. Uses the Bottom Navigation component from [React Native Paper](https://callstack.github.io/react-native-paper/bottom-navigation.html).

## Installation

Open a Terminal in your project's folder and run,

```sh

yarn add react-navigation-material-bottom-tabs react-native-paper

```

If you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).

```sh

yarn add react-native-vector-icons

react-native link react-native-vector-icons

```

If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.

If you use Expo, you don't need to install vector icons. But you will need to make sure that your `.babelrc` includes `babel-preset-expo`:

```json

{

  "presets": ["expo"]

}

```

If you don't use React Native Paper app, you should also add `react-native-paper/babel` to your `.babelrc` to avoid importing the whole library. See the [Getting Started guide](https://callstack.github.io/react-native-paper/getting-started.html) for more information.

## Usage

```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',

  activeColor: '#F44336',

});

```

## Docs

Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/material-bottom-tab-navigator.html).