chore: add support for badge

packages/material-bottom-tabs/commitlint.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
   extends: ['@commitlint/config-conventional'],
 };

packages/material-bottom-tabs/example/App.tsx

@@ -39,7 +39,9 @@ class Home extends React.Component<Props> {
   _renderItem = ({ item }: { item: Item }) => (
     <List.Item
       title={item.title}
-      onPress={() => this.props.navigation.navigate(item.routeName)}
+      onPress={() => {
+        this.props.navigation.navigate(item.routeName);
+      }}
     />
   );
 

packages/material-bottom-tabs/example/metro.config.js

@@ -5,7 +5,6 @@ const blacklist = require('metro-config/src/defaults/blacklist');
 const pak = require('../package.json');
 const escape = require('escape-string-regexp');
 
-const dependencies = Object.keys(pak.dependencies);
 const peerDependencies = Object.keys(pak.peerDependencies);
 
 module.exports = {
@@ -22,7 +21,6 @@ module.exports = {
     providesModuleNodeModules: [
       '@expo/vector-icons',
       '@babel/runtime',
-      ...dependencies,
       ...peerDependencies,
     ],
   },

packages/material-bottom-tabs/example/package.json

@@ -17,7 +17,7 @@
     "react": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
     "react-native-gesture-handler": "~1.3.0",
-    "react-native-paper": "^3.0.0-alpha.4",
+    "react-native-paper": "^3.0.0-alpha.7",
     "react-native-reanimated": "~1.1.0",
     "react-navigation": "^4.0.7",
     "react-navigation-stack": "^1.5.4"
@@ -25,9 +25,11 @@
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-expo": "^5.2.0",
+    "expo-cli": "^3.4.1",
     "glob-to-regexp": "^0.4.1"
   },
   "resolutions": {
+    "**/@babel/runtime": "7.6.3",
     "**/prop-types": "15.6.0",
     "**/react-lifecycles-compat": "3.0.4",
     "**/hoist-non-react-statics": "2.5.0"

packages/material-bottom-tabs/example/src/IconTabs.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
+import {
+  createMaterialBottomTabNavigator,
+  NavigationMaterialBottomTabOptions,
+} from 'react-navigation-material-bottom-tabs';
 import PhotoGrid from './shared/PhotoGrid';
 import tabBarIcon from './shared/tabBarIcon';
 
 class Album extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('photo-album'),
   };
 
@@ -14,8 +17,9 @@ class Album extends React.Component {
 }
 
 class Library extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('inbox'),
+    tabBarBadge: true,
   };
 
   render() {
@@ -24,7 +28,7 @@ class Library extends React.Component {
 }
 
 class Favorites extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('favorite'),
   };
 
@@ -34,7 +38,7 @@ class Favorites extends React.Component {
 }
 
 class Purchased extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('shop'),
   };
 

packages/material-bottom-tabs/example/src/ShiftingTabs.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
+import {
+  createMaterialBottomTabNavigator,
+  NavigationMaterialBottomTabOptions,
+} from 'react-navigation-material-bottom-tabs';
 import PhotoGrid from './shared/PhotoGrid';
 import tabBarIcon from './shared/tabBarIcon';
 
 class Album extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarColor: '#6200ee',
     tabBarIcon: tabBarIcon('photo-album'),
   };
@@ -15,7 +18,7 @@ class Album extends React.Component {
 }
 
 class Library extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarColor: '#2962ff',
     tabBarIcon: tabBarIcon('inbox'),
   };
@@ -26,7 +29,7 @@ class Library extends React.Component {
 }
 
 class Favorites extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarColor: '#00796b',
     tabBarIcon: tabBarIcon('favorite'),
   };
@@ -37,9 +40,10 @@ class Favorites extends React.Component {
 }
 
 class Purchased extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarColor: '#c51162',
     tabBarIcon: tabBarIcon('shop'),
+    tabBarBadge: 'test',
   };
 
   render() {

packages/material-bottom-tabs/example/src/SimpleTabs.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
+import {
+  createMaterialBottomTabNavigator,
+  NavigationMaterialBottomTabOptions,
+} from 'react-navigation-material-bottom-tabs';
 import PhotoGrid from './shared/PhotoGrid';
 import tabBarIcon from './shared/tabBarIcon';
 
 class Album extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('photo-album'),
   };
 
@@ -15,7 +18,7 @@ class Album extends React.Component {
 }
 
 class Library extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('inbox'),
   };
 
@@ -25,7 +28,7 @@ class Library extends React.Component {
 }
 
 class Favorites extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('favorite'),
   };
 
@@ -35,8 +38,9 @@ class Favorites extends React.Component {
 }
 
 class Purchased extends React.Component {
-  static navigationOptions = {
+  static navigationOptions: NavigationMaterialBottomTabOptions = {
     tabBarIcon: tabBarIcon('shop'),
+    tabBarBadge: 12,
   };
 
   render() {

packages/material-bottom-tabs/package.json

@@ -50,16 +50,16 @@
     "@types/react-native": "^0.57.57",
     "babel-jest": "^24.5.0",
     "commitlint": "^7.5.2",
-    "eslint": "^5.16.0",
-    "eslint-config-satya164": "^2.4.1",
+    "eslint": "^6.5.1",
+    "eslint-config-satya164": "^3.1.2",
     "eslint-plugin-react-native-globals": "^0.1.0",
     "husky": "^1.3.1",
     "jest": "^24.5.0",
-    "prettier": "^1.17.1",
+    "prettier": "^1.18.2",
     "react": "16.8.3",
     "react-native": "~0.59.8",
     "react-native-gesture-handler": "^1.4.1",
-    "react-native-paper": "^3.0.0-alpha.4",
+    "react-native-paper": "^3.0.0-alpha.7",
     "react-native-reanimated": "^1.2.0",
     "react-navigation": "^4.0.7",
     "release-it": "^12.3.6",

packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx

@@ -141,6 +141,14 @@ export default function createMaterialBottomTabNavigator(
       return options.tabBarTestID;
     };
 
+    _getBadge = ({ route }: { route: NavigationRoute }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const options = descriptor.options;
+
+      return options.tabBarBadge;
+    };
+
     _makeDefaultHandler = ({
       route,
       navigation,
@@ -224,6 +232,7 @@ export default function createMaterialBottomTabNavigator(
           getLabelText={this._getLabelText}
           getAccessibilityLabel={this._getAccessibilityLabel}
           getTestID={this._getTestID}
+          getBadge={this._getBadge}
           renderIcon={this._renderIcon}
           renderScene={this._renderScene}
           onIndexChange={this._handleIndexChange}

packages/material-bottom-tabs/src/types.tsx

@@ -20,6 +20,7 @@ export type NavigationTabProp<
 export type NavigationMaterialBottomTabOptions = {
   title?: string;
   tabBarLabel?: React.ReactNode;
+  tabBarBadge?: boolean | number | string;
   tabBarVisible?: boolean;
   tabBarAccessibilityLabel?: string;
   tabBarTestID?: string;

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {
   ThemeContext,
-  NavigationRoute,
   NavigationProp,
   NavigationDescriptor,
 } from 'react-navigation';
 import { BottomNavigation } from 'react-native-paper';
 import { NavigationMaterialBottomTabConfig } from '../types';
+import { ViewStyle } from 'react-native';
 
 type Options = {
   tabBarVisible?: boolean;
@@ -21,7 +21,7 @@ type Props = React.ComponentProps<typeof BottomNavigation> &
     descriptors: { [key: string]: NavigationDescriptor<any, Options> };
     screenProps?: unknown;
     renderIcon: (options: {
-      route: NavigationRoute;
+      route: { key: string };
       focused: boolean;
       tintColor: string;
     }) => React.ReactNode;
@@ -30,7 +30,7 @@ type Props = React.ComponentProps<typeof BottomNavigation> &
 export default class MaterialBottomTabView extends React.Component<Props> {
   static contextType = ThemeContext;
 
-  _getColor = ({ route }: { route: NavigationRoute }) => {
+  _getColor = ({ route }: { route: { key: string } }) => {
     const { descriptors } = this.props;
     const descriptor = descriptors[route.key];
     const options = descriptor.options;
@@ -93,7 +93,7 @@ export default class MaterialBottomTabView extends React.Component<Props> {
     focused,
     color,
   }: {
-    route: NavigationRoute;
+    route: { key: string };
     focused: boolean;
     color: string;
   }) => {
@@ -113,9 +113,9 @@ export default class MaterialBottomTabView extends React.Component<Props> {
     const barStyle = this._getBarStyle();
 
     const isVisible = this._isVisible();
-    const extraStyle =
+    const extraStyle: ViewStyle | null =
       typeof isVisible === 'boolean'
-        ? { display: isVisible ? null : 'none' }
+        ? { display: isVisible ? undefined : 'none' }
         : null;
 
     return (