fix "big icon button" bug on Android, #44

rilyu · Aug 24, 2017 · e1c42a1 · e1c42a1
1 parent cf862cd
commit e1c42a1
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 42 deletions.
diff --git a/components/TabView/TabView.js b/components/TabView/TabView.js
@@ -4,7 +4,7 @@
 
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 import TabSheet from './TabSheet';
@@ -52,55 +52,77 @@ export default class TabView extends Component {
     }].concat(style);
     barStyle = [{
       backgroundColor: Theme.tvBarColor,
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      right: 0,
       height: Theme.tvBarHeight,
       paddingTop: Theme.tvBarPaddingTop,
       paddingBottom: Theme.tvBarPaddingBottom,
       borderTopWidth: Theme.tvBarSeparatorWidth,
       borderColor: Theme.tvBarSeparatorColor,
+    }].concat(barStyle);
+    barStyle = StyleSheet.flatten(barStyle);
+    let {height, paddingTop, paddingBottom} = barStyle;
+    let buttonContainerStyle = {
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      right: 0,
+      paddingTop,
+      paddingBottom,
       flexDirection: 'row',
-      alignItems: 'stretch',
+      alignItems: 'flex-end',
       justifyContent: 'space-around',
-    }].concat(barStyle);
+    };
+    let buttonStyle = {
+      minHeight: height - paddingTop - paddingBottom,
+    };
 
     if (!(children instanceof Array)) {
       if (children) children = [children];
       else children = [];
     }
     children = children.filter(item => item); //remove empty item
 
-    this.props = {style, barStyle, children, ...others};
+    this.props = {style, barStyle, buttonContainerStyle, buttonStyle, children, ...others};
   }
 
   renderBar() {
-    let {barStyle, onChange, children} = this.props;
+    //Overflow is not supported on Android, then use a higher container view to support "big icon button"
+    let {barStyle, buttonContainerStyle, buttonStyle, onChange, children} = this.props;
     let sheetCount = 0;
     return (
-      <View style={barStyle}>
-        {children.map((item, index) => {
-          let {type, title, icon, activeIcon, iconContainerStyle, badge, onPress} = item.props;
-          let sheetIndex = sheetCount;
-          if (type === 'sheet') sheetCount += 1;
-          return (
-            <this.constructor.Button
-              key={index}
-              title={title}
-              icon={icon}
-              activeIcon={activeIcon}
-              active={type === 'sheet' ? sheetIndex === this.activeIndex : false}
-              iconContainerStyle={iconContainerStyle}
-              badge={badge}
-              onPress={e => {
-                if (type === 'sheet') {
-                  this.setState({activeIndex: sheetIndex}, () => {
-                    this.refs.carousel && this.refs.carousel.scrollToPage(sheetIndex);                  
-                    onChange && onChange(sheetIndex);
-                  });
-                }
-                onPress && onPress(e);
-              }}
-              />
-          );
-        })}
+      <View pointerEvents='box-none'>
+        <View style={barStyle} />
+        <View style={buttonContainerStyle} pointerEvents='box-none'>
+          {children.map((item, index) => {
+            let {type, title, icon, activeIcon, iconContainerStyle, badge, onPress} = item.props;
+            let sheetIndex = sheetCount;
+            if (type === 'sheet') sheetCount += 1;
+            return (
+              <this.constructor.Button
+                key={index}
+                style={buttonStyle}
+                title={title}
+                icon={icon}
+                activeIcon={activeIcon}
+                active={type === 'sheet' ? sheetIndex === this.activeIndex : false}
+                iconContainerStyle={iconContainerStyle}
+                badge={badge}
+                onPress={e => {
+                  if (type === 'sheet') {
+                    this.setState({activeIndex: sheetIndex}, () => {
+                      this.refs.carousel && this.refs.carousel.scrollToPage(sheetIndex);                  
+                      onChange && onChange(sheetIndex);
+                    });
+                  }
+                  onPress && onPress(e);
+                }}
+                />
+            );
+          })}
+        </View>
       </View>
     );
   }
@@ -135,10 +157,11 @@ export default class TabView extends Component {
   render() {
     this.buildProps();
 
-    let {type, children, ...others} = this.props;
+    let {barStyle, type, children, ...others} = this.props;
     return (
       <View {...others}>
         {type === 'carousel' ? this.renderCarousel() : this.renderProjector()}
+        <View style={{height: barStyle.height, width: 1}} />
         {this.renderBar()}
       </View>
     );

diff --git a/example/views/DrawerExample.js b/example/views/DrawerExample.js
@@ -28,7 +28,7 @@ export default class DrawerExample extends NavigationPage {
     if (side == 'left' || side == 'right') {
       this.drawer = Drawer.open(this.renderDrawerMenu(), side, rootTransform);
     } else {
-      this.drawer = Drawer.open(this.renderDrawerBox(side), side, rootTransform);
+      this.drawer = Drawer.open(this.renderDrawerBox(side), side, rootTransform, {containerStyle: {backgroundColor: 'rgba(0, 0, 0, 0)'}});
     }
   }
 
@@ -60,23 +60,29 @@ export default class DrawerExample extends NavigationPage {
   }
 
   renderDrawerBox(side) {
+    //Overflow is not supported on Android, then use a higher container view to implement this functionality
     return (
-      <View style={{backgroundColor: Theme.defaultColor, height: 260}}>
+      <View style={{
+        height: 290,
+        justifyContent: side == 'top' ? 'flex-start' : 'flex-end',
+      }}>
+        <View style={{backgroundColor: Theme.defaultColor, height: 260}}>
+          <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+            <Label type='detail' size='xl' text='Drawer' />
+          </View>
+        </View>
         <Image
           style={{
             position: 'absolute',
-            top: side == 'bottom' ? -30 : undefined,
-            bottom: side == 'top' ? -30 : undefined,
+            top: side == 'bottom' ? 0 : undefined,
+            bottom: side == 'top' ? 0 : undefined,
             left: 12,
             width: 60,
             height: 60,
             borderRadius: 30
           }}
           source={require('../images/faircup.jpg')}
           />
-        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-          <Label type='detail' size='xl' text='Drawer' />
-        </View>
       </View>
     );
   }

diff --git a/example/views/TabViewExample.js b/example/views/TabViewExample.js
@@ -3,7 +3,7 @@
 'use strict';
 
 import React, {Component} from 'react';
-import {StyleSheet, View, ScrollView, Image, Switch} from 'react-native';
+import {StyleSheet, View, ScrollView, Image, Switch, Platform} from 'react-native';
 
 import {Theme, TeaNavigator, NavigationPage, BasePage, ListRow, TabView, Label, PullPicker} from 'teaset';
 
@@ -54,7 +54,7 @@ export default class TabViewExample extends BasePage {
 
   renderPage() {
     let {type, custom} = this.state;
-    let customBarStyle = {
+    let customBarStyle = Platform.OS == 'android'  ? null : {
       borderTopWidth: 0,
       shadowColor: '#ccc',
       shadowOffset: {height: -1},

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "teaset",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A UI library for react native.",
   "main": "index.js",
   "scripts": {