footer tab added

Author: Sankhadeep

Components/Widgets/Button.js

@@ -34,14 +34,14 @@ export default class Button extends NativeBaseComponent {
     getInitialStyle() {
         return {
             button: {
-                paddingVertical: this.getTheme().buttonPadding,
-                paddingHorizontal: this.getTheme().buttonPadding+2,
+                paddingVertical: (this.props.vertical) ? 0 :this.getTheme().buttonPadding,
+                paddingHorizontal: (this.props.vertical) ? 5 :this.getTheme().buttonPadding+2,
                 justifyContent: (this.props.block) ? 'center' : 'space-around',
-                flexDirection: 'row',
+                flexDirection:  (this.props.vertical) ? 'column' : 'row',
                 alignSelf: 'center',
                 alignItems: 'center',
                 backgroundColor: this.getTheme().btnPrimaryBg,
-                elevation: (this.props.transparent || this.props.bordered) ? 0 : 4,
+                elevation: (this.props.transparent || this.props.bordered) ? 0 : 3,
                 shadowColor: (this.props.transparent || this.props.bordered) ? undefined : '#000',
                 shadowOffset: (this.props.transparent || this.props.bordered) ? undefined : {width: 0, height: 2},
                 shadowOpacity: (this.props.transparent || this.props.bordered) ? undefined : 0.2,
@@ -89,7 +89,7 @@ export default class Button extends NativeBaseComponent {
         var mergedStyle = {};
         var btnType = {
             fontFamily: this.getTheme().btnFontFamily,
-            marginLeft: (this.iconPresent() && !this.props.iconRight) ? this.getTheme().iconMargin : 0,
+            marginLeft: (this.props.vertical) ? 0 : (this.iconPresent() && !this.props.iconRight) ? this.getTheme().iconMargin : 0,
             marginRight: (this.iconPresent() && this.props.iconRight) ? this.getTheme().iconMargin : 0,
             color:
                     ((this.props.bordered) && (this.props.primary)) ? this.getTheme().btnPrimaryBg :

Components/Widgets/Footer.js

@@ -16,14 +16,15 @@ export default class Footer extends NativeBaseComponent {
         return {
             navbar: {
                 shadowColor: '#000',
-                shadowOffset: {width: 0, height: 2},
+                shadowOffset: {width: 0, height: -2},
                 shadowOpacity: 0.1,
                 shadowRadius: 1.5,
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: (!Array.isArray(this.props.children)) ? 'center' : 'space-between',
                 height: this.getTheme().footerHeight,
-                backgroundColor: this.getTheme().footerDefaultBg
+                backgroundColor: this.getTheme().footerDefaultBg,
+                elevation: 18
             }
         }
     }
@@ -43,7 +44,7 @@ export default class Footer extends NativeBaseComponent {
         return(
             <View {...this.prepareRootProps()}>
                 { !Array.isArray(this.props.children) &&
-                <View >
+                <View style={{flex: 1, alignItems: 'center'}} >
                     {this.props.children}
                 </View>}
 

Components/Widgets/FooterTab.js

@@ -0,0 +1,111 @@
+/* @flow */
+'use strict';
+
+import React from 'react';
+import NativeBaseComponent from '../Base/NativeBaseComponent';
+import computeProps from '../../Utils/computeProps';
+import Button from './Button';
+import { Platform } from 'react-native';
+import View from './View';
+import Icon from './Icon';
+import IconNB from './Icon';
+import Text from './Text';
+
+export default class Footer extends NativeBaseComponent {
+
+    propTypes: {
+        style : React.PropTypes.object
+    }
+
+    getInitialStyle() {
+        return {
+            footerTab: {
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                flex: 1,
+                alignSelf: 'stretch',
+                paddingHorizontal: 15
+            },
+            btnTextStyle: {
+                color: this.getTheme().tabBarTextColor,
+                fontSize: 14
+            },
+            btnActiveTextStyle: {
+                color: this.getTheme().tabBarActiveTextColor,
+                fontSize: 14
+            },
+            btnStyle: {
+                alignSelf: 'center'
+            }
+        }
+    }
+
+    prepareRootProps() {
+
+        var defaultProps = {
+            style: this.getInitialStyle().footerTab
+        };
+
+        return computeProps(this.props, defaultProps);
+
+    }
+
+    renderFooter() {
+        var childrenArray = React.Children.toArray(this.props.children);
+        var newChildren = [];
+
+        {childrenArray.map((child, i) => {
+            if (typeof child.props.children==='string') {
+                newChildren.push(React.cloneElement(child, {
+                    style: this.getInitialStyle().btnStyle,
+                    vertical: true,
+                    transparent:true,
+                    textStyle: (child.props.active) ? this.getInitialStyle().btnActiveTextStyle : this.getInitialStyle().btnTextStyle,
+                    key: i}));
+            }
+            else {
+                let iconElement = [];
+                iconElement = _.remove(child.props.children, function(item) {
+                    if(item.type == IconNB) {
+                        return true;
+                    }
+                });
+                if (iconElement.length>0) {
+                    newChildren.push(
+                        <Button transparent vertical
+                            style={this.getInitialStyle().btnStyle}
+                            textStyle={(child.props.active) ? this.getInitialStyle().btnActiveTextStyle : this.getInitialStyle().btnTextStyle}
+                            key={i}>
+                            {child.props.children}
+                            <Icon
+                                style={{color: (child.props.active) ? this.getTheme().tabBarActiveTextColor : this.getTheme().tabBarTextColor}}
+                                name={iconElement[0].props.name} />
+                        </Button>
+                    );
+                }
+                else {
+                    newChildren.push(
+                        <Button transparent vertical
+                            style={this.getInitialStyle().btnStyle}
+                            textStyle={(child.props.active) ? this.getInitialStyle().btnActiveTextStyle : this.getInitialStyle().btnTextStyle}
+                            key={i}>
+                            <Icon
+                                style={{color: (child.props.active) ? this.getTheme().tabBarActiveTextColor : this.getTheme().tabBarTextColor}}
+                                name={child.props.children.props.name} />
+                        </Button>
+                    );
+                }
+            };
+        })}
+        return newChildren;
+    }
+
+    render() {
+
+        return(
+            <View {...this.prepareRootProps()} >
+                {this.renderFooter()}
+            </View>
+        );
+    }
+}