c9313a1419
- react-navigation-animated-switch@0.5.7 - @react-navigation/core@3.7.2 - react-navigation-drawer@2.4.8 - react-navigation-material-bottom-tabs@2.2.7 - @react-navigation/native@3.7.8 - react-navigation@4.3.4 - react-navigation-stack@2.3.8 - react-navigation-tabs@2.8.8
React Navigation Material Bottom Tabs
Bottom Navigation component following Material design guidelines to use with React Navigation. Uses the Bottom Navigation component from React Native Paper.
Installation
Open a Terminal in your project's folder and run,
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.
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 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:
{
"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 for more information.
Usage
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.