breaking: remove <TabBarBottom />

Author: satya164

README.md

@@ -111,9 +111,9 @@ The package exposes the following components,
 
   It accepts the following props,
   - `pressColor` - color for material ripple (Android > 5.0 only)
-  - `renderIcon` - callback which receives the current scene and returns a React Element to be used as a icon
-  - `renderLabel` - callback which receives the current scene and returns a React Element to be used as a label
-  - `renderIndicator` - callback which receives the current scene and returns a React Element to be used as a indicator
+  - `renderIcon` - optiona; 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 indicator
   - `tabStyle` - style object for the tab
   - `indicatorStyle` - style object for the tab indicator
 
@@ -122,8 +122,3 @@ The package exposes the following components,
   It accepts the following props in addition to the props accepted by `<TabBar />`,
   - `renderLabel` - optional callback which receives the current scene and returns a React Element to be used as a label
   - `indicatorStyle` - style object for the tab indicator
-
-- `<TabBarTop />` - material design themed bottom tab bar
-
-  It accepts the following props in addition to the props accepted by `<TabBar />`,
-  - `renderLabel` - optional callback which receives the current scene and returns a React Element to be used as a label

example/src/BottomBarIconExample.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { View, Image, StyleSheet } from 'react-native';
-import { TabViewAnimated, TabViewPage, TabBarBottom } from 'react-native-tab-view';
+import { TabViewAnimated, TabViewPage, TabBar } from 'react-native-tab-view';
 
 const styles = StyleSheet.create({
   container: {
@@ -53,7 +53,7 @@ export default class TopBarIconExample extends Component {
 
   _renderFooter = (props) => {
     return (
-      <TabBarBottom
+      <TabBar
         {...props}
         pressColor='rgba(0, 0, 0, .2)'
         renderIcon={this._renderIcon}

example/src/BottomBarIconTextExample.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { View, Image, StyleSheet } from 'react-native';
-import { TabViewAnimated, TabViewPage, TabBarBottom } from 'react-native-tab-view';
+import { TabViewAnimated, TabViewPage, TabBar } from 'react-native-tab-view';
 
 const styles = StyleSheet.create({
   container: {
@@ -14,6 +14,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  tab: {
+    padding: 0,
+  },
 });
 
 export default class TopBarIconExample extends Component {
@@ -53,10 +56,11 @@ export default class TopBarIconExample extends Component {
 
   _renderFooter = (props) => {
     return (
-      <TabBarBottom
+      <TabBar
         {...props}
         pressColor='rgba(0, 0, 0, .2)'
         renderIcon={this._renderIcon}
+        tabStyle={styles.tab}
         style={styles.tabbar}
       />
     );

example/src/NoAnimationExample.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { View, Image, StyleSheet } from 'react-native';
-import { TabViewAnimated, TabViewPage, TabBarBottom } from 'react-native-tab-view';
+import { TabViewAnimated, TabViewPage, TabBar } from 'react-native-tab-view';
 
 const styles = StyleSheet.create({
   container: {
@@ -53,7 +53,7 @@ export default class TopBarIconExample extends Component {
 
   _renderFooter = (props) => {
     return (
-      <TabBarBottom
+      <TabBar
         {...props}
         pressColor='rgba(0, 0, 0, .2)'
         renderIcon={this._renderIcon}

index.js

@@ -3,4 +3,3 @@ export { default as TabViewAnimated } from './src/TabViewAnimated';
 export { default as TabViewPage } from './src/TabViewPage';
 export { default as TabBar } from './src/TabBar';
 export { default as TabBarTop } from './src/TabBarTop';
-export { default as TabBarBottom } from './src/TabBarBottom';

src/TabBar.js

@@ -5,6 +5,7 @@ import {
   Animated,
   StyleSheet,
   View,
+  Text,
 } from 'react-native';
 import shallowCompare from 'react-addons-shallow-compare';
 import TouchableItem from './TouchableItem';
@@ -18,6 +19,10 @@ const styles = StyleSheet.create({
     flexWrap: 'nowrap',
     elevation: 4,
   },
+  tablabel: {
+    color: 'white',
+    margin: 8,
+  },
   tab: {
     flex: 1,
   },
@@ -29,16 +34,20 @@ const styles = StyleSheet.create({
   },
 });
 
+type DefaultProps = {
+  renderLabel: (scene: Scene) => ?React.Element<any>;
+}
+
 type Props = SceneRendererProps & {
   pressColor?: string;
-  renderLabel: (scene: Scene) => React.Element<any>;
-  renderIcon: (scene: Scene) => React.Element<any>;
-  renderIndicator: (props: SceneRendererProps) => React.Element<any>;
+  renderLabel?: (scene: Scene) => ?React.Element<any>;
+  renderIcon?: (scene: Scene) => ?React.Element<any>;
+  renderIndicator?: (props: SceneRendererProps) => ?React.Element<any>;
   tabStyle?: any;
   style?: any;
 }
 
-export default class TabBarTop extends Component<void, Props, void> {
+export default class TabBarTop extends Component<DefaultProps, Props, void> {
   static propTypes = {
     ...SceneRendererPropType,
     pressColor: TouchableItem.propTypes.pressColor,
@@ -49,6 +58,10 @@ export default class TabBarTop extends Component<void, Props, void> {
     style: View.propTypes.style,
   };
 
+  static defaultProps = {
+    renderLabel: ({ route }) => route.title ? <Text style={styles.tablabel}>{route.title}</Text> : null,
+  };
+
   shouldComponentUpdate(nextProps: Props, nextState: void) {
     return shallowCompare(this, nextProps, nextState);
   }

src/TabBarBottom.js

@@ -15,7 +15,6 @@ import type { Scene, SceneRendererProps } from './TabViewTypeDefinitions';
 const styles = StyleSheet.create({
   tablabel: {
     color: 'white',
-    fontSize: 14,
     margin: 8,
   },
   indicator: {