@choose/react-navigation-tabs
v2.9.5
Published
Tab Navigation components for React Navigation
Downloads
154
Readme
React Navigation Tabs
Tab navigators for React Navigation.
Installation
Follow the instructions on the the React Navigation "Getting Started" guide, 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.
You can import individual navigators and use them:
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
, to use a third type of tab navigator:
createMaterialBottomTabNavigator
: Material design themed animated bottom tabs, from react-native-paper.
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:
yarn bootstrap
While developing, you can run the example app with Expo to test your changes:
yarn example start
Make sure your code passes TypeScript and ESLint. Run the following to verify:
yarn typescript
yarn lint
To fix formatting errors, run the following:
yarn lint --fix