Modification of TransistionContainer for android compatibility

3 files changed, 57 insertions, 18 deletions

diff --git a/app/components/TransitionContainer.js b/app/components/TransitionContainer.js
index 4dfeb99c70..a1609890d8 100644
--- a/app/components/TransitionContainer.js
+++ b/app/components/TransitionContainer.js
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Styles, Component, Animated, View, Types, UserInterface } from 'reactxp';
 import type { TransitionGroupProps } from '../transitions';
+import getStyles from './TransitionContainerStyles'
 
 type TransitionContainerProps = {
   children: React.Node,
@@ -25,20 +26,6 @@ export default class TransitionContainer extends Component<TransitionContainerPr
 
     this.state = {
       dimensions,
-      animationStyles: {
-        style: Styles.createAnimatedViewStyle({
-          position: 'absolute',
-          width: dimensions.width,
-          height: dimensions.height,
-        }),
-        allowPointerEvents: Styles.createAnimatedViewStyle({
-          pointerEvents: 'auto',
-        })
-      },
-      transitionContainerStyle: Styles.createViewStyle({
-        width: dimensions.width,
-        height: dimensions.height,
-      })
     };
   }
 
@@ -63,7 +50,7 @@ export default class TransitionContainer extends Component<TransitionContainerPr
 
   onFinishedAnimation() {
     this.setState({
-      childrenAnimation: null,//this.state.animationStyles.allowPointerEvents,
+      childrenAnimation: getStyles().allowPointerEventsStyle,
       previousChildren: null
     });
   }
@@ -182,14 +169,14 @@ export default class TransitionContainer extends Component<TransitionContainerPr
     const { children } = this.props;
     const { previousChildren, childrenAnimation, previousChildrenAnimation } = this.state;
     return (
-      <View style={ this.state.transitionContainerStyle }>
+      <View style={ getStyles().transitionContainerStyle }>
         { previousChildren &&
           (<Animated.View key={ previousChildren && previousChildren.key }
-            style={[this.state.animationStyles.style, previousChildrenAnimation]}>
+            style={[getStyles().animationDefaultStyle, previousChildrenAnimation]}>
             { previousChildren }
           </Animated.View>) }
 
-        <Animated.View key={ children.key } style={[this.state.animationStyles.style, childrenAnimation]}>
+        <Animated.View key={ children.key } style={[getStyles().animationDefaultStyle, childrenAnimation]}>
           { children }
         </Animated.View>
 
diff --git a/app/components/TransitionContainerStyles.android.js b/app/components/TransitionContainerStyles.android.js
new file mode 100644
index 0000000000..30abdfede8
--- /dev/null
+++ b/app/components/TransitionContainerStyles.android.js
@@ -0,0 +1,30 @@
+// @flow
+import { Styles, UserInterface } from 'reactxp';
+import { MobileAppBridge } from 'NativeModules';
+
+const dimensions = UserInterface.measureWindow();
+let menuBarHeight;
+
+/*MobileAppBridge.getHeight().then(_response => {height = _response}).catch(e => {
+  log.error('Failed getting menuBarHeight:', e);
+});
+*/
+MobileAppBridge.getMenuBarHeight().then(_response => {menuBarHeight = _response}).catch(e => {
+  log.error('Failed getting menuBarHeight:', e);
+});
+
+
+export default getStyles = () => {
+  return {
+    animationDefaultStyle: Styles.createAnimatedViewStyle({
+      position: 'absolute',
+      width: dimensions.width,
+      height: dimensions.height - menuBarHeight + 24,
+    }, false),
+    allowPointerEventsStyle: null,
+    transitionContainerStyle: Styles.createViewStyle({
+      width: dimensions.width,
+      height: dimensions.height - menuBarHeight + 24, //TODO: Remove ugly hack since it seems that at least my LG is hard to find the real display area ... Probably needs to be fixed for some versions or models
+    }, false)
+  }
+};
diff --git a/app/components/TransitionContainerStyles.js b/app/components/TransitionContainerStyles.js
new file mode 100644
index 0000000000..522398920c
--- /dev/null
+++ b/app/components/TransitionContainerStyles.js
@@ -0,0 +1,22 @@
+// @flow
+import { Styles, UserInterface } from 'reactxp';
+
+const dimensions = UserInterface.measureWindow();
+const styles = {
+  animationDefaultStyle: Styles.createAnimatedViewStyle({
+    position: 'absolute',
+    width: dimensions.width,
+    height: dimensions.height,
+  }),
+  allowPointerEventsStyle: Styles.createAnimatedViewStyle({
+    pointerEvents: 'auto',
+  }),
+  transitionContainerStyle: Styles.createViewStyle({
+    width: dimensions.width,
+    height: dimensions.height,
+  })
+};
+
+export default function getStyles() {
+  return styles
+};
\ No newline at end of file