Merge branch 'release/2.0.15'

components/DropDownMenu/DropDownModal.js

@@ -80,8 +80,8 @@ class DropDownModal extends PureComponent {
     this.emitOnOptionSelectedEvent = this.emitOnOptionSelectedEvent.bind(this);
     this.getKeyAreaHeights = this.getKeyAreaHeights.bind(this);
     this.renderGradient = this.renderGradient.bind(this);
+    this.resolveListViewStyle = this.resolveListViewStyle.bind(this);
     this.renderRow = this.renderRow.bind(this);
-    this.resolveModalStyle = this.resolveModalStyle.bind(this);
     this.selectOption = this.selectOption.bind(this);
     this.onOptionLayout = this.onOptionLayout.bind(this);
 
@@ -146,19 +146,21 @@ class DropDownModal extends PureComponent {
   }
 
   resolveListViewStyle() {
-    const listViewHeight = this.calculateListViewHeight();
-
-    return { flex: 0, maxHeight: listViewHeight };
-  }
-
-  resolveModalStyle() {
-    const { style } = this.props;
+    const { style, options } = this.props;
 
     const { bufferHeight } = this.getKeyAreaHeights();
+    const visibleOptions = this.getVisibleOptions();
+
+    const padding = style.modal.paddingVertical ? bufferHeight - style.modal.paddingVertical : bufferHeight;
+    const flex = _.size(options) >= visibleOptions ? 0 : 1;
 
     return {
-      ...style.modal,
-      paddingTop: style.modal.paddingTop + bufferHeight,
+      listContent: {
+        flex,
+        backgroundColor: style.modal.backgroundColor,
+        paddingVertical: Math.min(250, padding),
+        justifyContent: 'center',
+      },
     };
   }
 
@@ -200,7 +202,6 @@ class DropDownModal extends PureComponent {
   renderGradient() {
     const { style } = this.props;
     const { backgroundColor } = style.modal;
-    const { optionHeight } = this.state;
 
     // We divide the modal screen per key areas to which we apply a layer of gradient
     // Screen ratio is represented in (0 - 1) format, where the ratio of 1 represents the entire
@@ -229,22 +230,22 @@ class DropDownModal extends PureComponent {
 
     const gradientConfig = [{
       location: 0,
-      color: bufferColor
-    },{
-      location: bufferHeight / screenHeight,
+      color: changeColorAlpha(bufferColor, 1),
+    }, {
+      location: Math.min(0.25, bufferHeight / screenHeight),
       color: backgroundColor
-    },{
+    }, {
       location: (bufferHeight + gradientHeight) / screenHeight,
       color: invertedColor
-    },{
+    }, {
       location: (bufferHeight + gradientHeight + transparencyHeight) / screenHeight,
       color: invertedColor,
-    },{
-      location: (bufferHeight + listViewHeight) / screenHeight,
+    }, {
+      location: Math.max((bufferHeight + listViewHeight) / screenHeight, 0.75),
       color: backgroundColor
-    },{
+    }, {
       location: 1,
-      color: bufferColor
+      color: changeColorAlpha(bufferColor, 1),
     }];
 
     return (
@@ -282,7 +283,6 @@ class DropDownModal extends PureComponent {
       return null;
     }
 
-    const modalStyle = this.resolveModalStyle();
     const listViewStyle = this.resolveListViewStyle();
     const data = options.filter((option) => option[titleProperty]);
 
@@ -294,7 +294,7 @@ class DropDownModal extends PureComponent {
       >
         <ZoomOut driver={this.timingDriver} maxFactor={1.1} style={{ flex: 1 }}>
           <FadeIn driver={this.timingDriver} style={{ flex: 1 }}>
-            <View style={modalStyle}>
+            <View style={style.modal}>
               {modalContentVisible &&
                 <ListView
                   data={data}

helpers/keyboard.js

@@ -1,10 +1,18 @@
-import { IPHONE_X_HOME_INDICATOR_PADDING } from '../const';
+import { Platform } from 'react-native';
+import { getStatusBarHeight } from 'react-native-status-bar-height';
+import { IPHONE_X_HOME_INDICATOR_PADDING, NAVIGATION_HEADER_HEIGHT } from '../const';
 import { Device } from './device-selector';
 
-export function calculateKeyboardOffset(extraOffset = 0) {
-  return (Device.isIphoneX || Device.isIphoneXR)
-    ? IPHONE_X_HOME_INDICATOR_PADDING + extraOffset
-    : extraOffset;
+export function calculateKeyboardOffset(extraOffset = NAVIGATION_HEADER_HEIGHT) {
+  if (Platform.OS === 'ios') {
+    return (Device.isIphoneX || Device.isIphoneXR)
+      ? IPHONE_X_HOME_INDICATOR_PADDING + extraOffset
+      : extraOffset;
+  }
+
+  if (Platform.OS === 'android') {
+    return getStatusBarHeight() + extraOffset;
+  }
 }
 
 export default { calculateKeyboardOffset };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "Styleable set of components for React Native applications",
   "dependencies": {
     "@shoutem/animation": "~0.12.4",
@@ -21,6 +21,7 @@
     "react-native-linear-gradient": "~2.5.6",
     "react-native-photo-view": "shoutem/react-native-photo-view#0ffa1481f6b6cb8663cb291b7db1d6644440584d",
     "react-native-render-html": "~4.2.0",
+    "react-native-status-bar-height": "2.5.0",
     "react-native-transformable-image": "shoutem/react-native-transformable-image#v0.0.20",
     "react-native-vector-icons": "~6.6.0",
     "react-native-webview": "9.4.0",

theme.js

@@ -1993,8 +1993,6 @@ export default (variables = defaultThemeVariables) => ({
         alignSelf: 'stretch',
         ...variables.subtitle,
       },
-
-      flex: 1,
     },
 
     visibleOptions: 8,