feat: add a renderBadge prop to TabBar

satya164 · Sep 24, 2016 · f452188 · f452188
1 parent 47cee5a
commit f452188
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -132,6 +132,7 @@ It accepts the following props,
 - `renderIcon` - optional callback which receives the current scene and returns a React Element to be used as a icon
 - `renderLabel` - optional callback which receives the current scene and returns a React Element to be used as a label
 - `renderIndicator` - optional callback which receives the current scene and returns a React Element to be used as a tab indicator
+- `renderBadge` - optional callback which receives the current scene and returns a React Element to be used as a badge
 - `onTabItemPress` - optional callback invoked on tab press, useful for things like scroll to top
 - `tabStyle` - style object for the tab
 

diff --git a/example/src/BottomBarIconTextExample.js b/example/src/BottomBarIconTextExample.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Image, StyleSheet } from 'react-native';
+import { View, Image, Text, StyleSheet } from 'react-native';
 import { TabViewAnimated, TabViewPage, TabBar } from 'react-native-tab-view';
 
 const styles = StyleSheet.create({
@@ -17,6 +17,23 @@ const styles = StyleSheet.create({
   tab: {
     padding: 0,
   },
+  badge: {
+    marginTop: 4,
+    marginRight: 32,
+    backgroundColor: '#f44336',
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 4,
+  },
+  count: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginTop: -2,
+  },
 });
 
 export default class TopBarIconExample extends Component {
@@ -52,12 +69,24 @@ export default class TopBarIconExample extends Component {
     }
   };
 
+  _renderBadge = ({ route }) => {
+    if (route.key === '2') {
+      return (
+        <View style={styles.badge}>
+          <Text style={styles.count}>42</Text>
+        </View>
+      );
+    }
+    return null;
+  };
+
   _renderFooter = (props) => {
     return (
       <TabBar
         {...props}
         pressColor='rgba(0, 0, 0, .2)'
         renderIcon={this._renderIcon}
+        renderBadge={this._renderBadge}
         tabStyle={styles.tab}
         style={styles.tabbar}
       />

diff --git a/src/TabBar.js b/src/TabBar.js
@@ -12,6 +12,9 @@ import { SceneRendererPropType } from './TabViewPropTypes';
 import type { Scene, SceneRendererProps } from './TabViewTypeDefinitions';
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   tabbar: {
     backgroundColor: 'black',
     flexDirection: 'row',
@@ -32,6 +35,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  badge: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
 });
 
 type DefaultProps = {
@@ -42,6 +50,7 @@ type Props = SceneRendererProps & {
   pressColor?: string;
   renderLabel?: (scene: Scene) => ?React.Element<any>;
   renderIcon?: (scene: Scene) => ?React.Element<any>;
+  renderBadge?: (scene: Scene) => ?React.Element<any>;
   renderIndicator?: (props: SceneRendererProps) => ?React.Element<any>;
   onTabItemPress?: Function;
   tabStyle?: any;
@@ -86,6 +95,7 @@ export default class TabBar extends Component<DefaultProps, Props, void> {
           };
           const icon = this.props.renderIcon ? this.props.renderIcon(scene) : null;
           const label = this.props.renderLabel ? this.props.renderLabel(scene) : null;
+          const badge = this.props.renderBadge ? this.props.renderBadge(scene) : null;
 
           let tabStyle;
 
@@ -110,10 +120,17 @@ export default class TabBar extends Component<DefaultProps, Props, void> {
                 jumpToIndex(i);
               }}
             >
-              <Animated.View style={[ styles.tabitem, { opacity }, tabStyle, this.props.tabStyle ]}>
-                {this.props.renderIcon ? this.props.renderIcon(scene) : null}
-                {this.props.renderLabel ? this.props.renderLabel(scene) : null}
-              </Animated.View>
+              <View style={styles.container}>
+                <Animated.View style={[ styles.tabitem, { opacity }, tabStyle, this.props.tabStyle ]}>
+                  {icon}
+                  {label}
+                </Animated.View>
+                {badge ?
+                  <View style={styles.badge}>
+                    {badge}
+                  </View> : null
+                }
+              </View>
             </TouchableItem>
           );
         })}