LL-451 Bottom modal glitches sometimes on certain Android phones

android/app/build.gradle

@@ -178,6 +178,7 @@ configurations.all {
 }
 
 dependencies {
+    compile project(':react-native-extra-dimensions-android')
     compile project(':@segment_analytics-react-native')
     compile project(':react-native-keychain')
     compile project(':react-native-android-location-services-dialog-box')

android/app/src/main/java/com/ledger/live/MainApplication.java

@@ -4,6 +4,7 @@
 
 import com.bitgo.randombytes.RandomBytesPackage;
 import com.facebook.react.ReactApplication;
+import ca.jaysoo.extradimensions.ExtraDimensionsPackage;
 import com.segment.analytics.reactnative.core.RNAnalyticsPackage;
 import com.oblador.keychain.KeychainPackage;
 import com.showlocationservicesdialogbox.LocationServicesDialogBoxPackage;
@@ -50,6 +51,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ExtraDimensionsPackage(),
             new RNAnalyticsPackage(),
             new KeychainPackage(),
             new LocationServicesDialogBoxPackage(),

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'ledgerlivemobile'
+include ':react-native-extra-dimensions-android'
+project(':react-native-extra-dimensions-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-extra-dimensions-android/android')
 include ':@segment_analytics-react-native'
 project(':@segment_analytics-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/@segment/analytics-react-native/android')
 include ':react-native-keychain'

package.json

@@ -88,11 +88,12 @@
     "react-native-config": "0.11.5",
     "react-native-crypto": "^2.1.2",
     "react-native-easy-markdown": "^1.2.0",
+    "react-native-extra-dimensions-android": "^0.22.0",
     "react-native-gesture-handler": "^1.0.7",
     "react-native-keychain": "^3.0.0",
     "react-native-level-fs": "^3.0.0",
     "react-native-locale": "0.0.19",
-    "react-native-modal": "^6.5.0",
+    "react-native-modal": "^7.0.1",
     "react-native-open-settings": "^1.0.1",
     "react-native-os": "^1.0.1",
     "react-native-progress": "^3.5.0",

src/components/BottomModal.js

@@ -8,6 +8,7 @@ import TrackScreen from "../analytics/TrackScreen";
 import StyledStatusBar from "./StyledStatusBar";
 import colors from "../colors";
 import ButtonUseTouchable from "../context/ButtonUseTouchable";
+import getWindowDimensions from "../logic/getWindowDimensions";
 
 export type Props = {
   id?: string,
@@ -17,18 +18,29 @@ export type Props = {
   style?: *,
 };
 
+// Add some extra padding at the bottom of the modal
+// and make it overflow the bottom of the screen
+// so that the underlying UI doesn't show up
+// when it gets the position wrong and display too high
+// See Jira LL-451 and GitHub #617
+const EXTRA_PADDING_ANDROID_FIX = 50;
+
 class BottomModal extends Component<Props> {
   static defaultProps = {
     onClose: () => {},
   };
   render() {
     const { isOpened, onClose, children, style, id, ...rest } = this.props;
+    const { width, height } = getWindowDimensions();
+
     return (
       <ButtonUseTouchable.Provider value={true}>
         <ReactNativeModal
           isVisible={isOpened}
           onBackdropPress={onClose}
           onBackButtonPress={onClose}
+          deviceWidth={width}
+          deviceHeight={height}
           useNativeDriver
           style={{
             justifyContent: "flex-end",
@@ -58,7 +70,8 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
     paddingTop: 8,
-    paddingBottom: 24,
+    paddingBottom: 24 + EXTRA_PADDING_ANDROID_FIX,
+    marginBottom: EXTRA_PADDING_ANDROID_FIX * -1,
   },
 });
 

src/components/GraphCard.js

@@ -3,7 +3,7 @@
 import React, { PureComponent, Fragment } from "react";
 import { compose } from "redux";
 import { connect } from "react-redux";
-import { View, StyleSheet, Dimensions, Platform } from "react-native";
+import { View, StyleSheet, Platform } from "react-native";
 import { Trans } from "react-i18next";
 
 import type { Unit } from "@ledgerhq/live-common/lib/types";
@@ -14,6 +14,8 @@ import colors from "../colors";
 
 import { setSelectedTimeRange } from "../actions/settings";
 
+import getWindowDimensions from "../logic/getWindowDimensions";
+
 import Delta from "./Delta";
 import FormatDate from "./FormatDate";
 import Graph from "./Graph";
@@ -87,7 +89,7 @@ class GraphCard extends PureComponent<Props, State> {
           isInteractive={isAvailable}
           isLoading={!isAvailable}
           height={100}
-          width={Dimensions.get("window").width - 40}
+          width={getWindowDimensions().width - 40}
           color={isAvailable ? graphColor : colors.grey}
           data={balanceHistory}
           onItemHover={this.onItemHover}

src/logic/extraStatusBarPadding.js

@@ -1,7 +1,8 @@
-import { Platform, StatusBar } from "react-native";
+import { Platform } from "react-native";
+import ExtraDimensions from "react-native-extra-dimensions-android";
 
 export default (Platform.OS === "ios"
   ? parseInt(Platform.Version, 10) < 11
     ? 16
     : 0
-  : StatusBar.currentHeight);
+  : ExtraDimensions.get("STATUS_BAR_HEIGHT"));

src/logic/getWindowDimensions.android.js

@@ -0,0 +1,6 @@
+import ExtraDimensions from "react-native-extra-dimensions-android";
+
+export default () => ({
+  width: ExtraDimensions.get("REAL_WINDOW_WIDTH"),
+  height: ExtraDimensions.get("REAL_WINDOW_HEIGHT"),
+});

src/logic/getWindowDimensions.ios.js

@@ -0,0 +1,7 @@
+import { Dimensions } from "react-native";
+
+export default () => {
+  const { width, height } = Dimensions.get("window");
+
+  return { width, height };
+};

src/screens/BenchmarkQRStream.js

@@ -1,16 +1,12 @@
 // @flow
 
 import React, { PureComponent } from "react";
-import { StyleSheet, View, Dimensions } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { RNCamera } from "react-native-camera";
 import type { NavigationScreenProp } from "react-navigation";
 import LText from "../components/LText";
 import colors, { rgba } from "../colors";
-
-const getDimensions = () => {
-  const { width, height } = Dimensions.get("window");
-  return { width, height };
-};
+import getWindowDimensions from "../logic/getWindowDimensions";
 
 export default class BenchmarkQRStream extends PureComponent<
   {
@@ -23,7 +19,7 @@ export default class BenchmarkQRStream extends PureComponent<
   };
 
   state = {
-    ...getDimensions(),
+    ...getWindowDimensions(),
     benchmarks: [],
     end: false,
   };

src/screens/FirmwareUpdate/02-CheckId.js

@@ -1,7 +1,7 @@
 /* @flow */
 /* eslint-disable no-console */
 import React, { Component } from "react";
-import { View, Dimensions, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-navigation";
 import type { NavigationScreenProp } from "react-navigation";
 import { from, of } from "rxjs";
@@ -21,6 +21,7 @@ import StepHeader from "../../components/StepHeader";
 import LText from "../../components/LText";
 import DeviceNanoAction from "../../components/DeviceNanoAction";
 import Installing from "./Installing";
+import getWindowDimensions from "../../logic/getWindowDimensions";
 
 type Navigation = NavigationScreenProp<{
   params: {
@@ -130,7 +131,7 @@ class FirmwareUpdateCheckId extends Component<Props, State> {
     const { installing } = this.state;
     const { navigation } = this.props;
     const latestFirmware = navigation.getParam("latestFirmware");
-    const windowWidth = Dimensions.get("window").width;
+    const windowWidth = getWindowDimensions().width;
     return (
       <SafeAreaView style={styles.root}>
         <TrackScreen category="FirmwareUpdate" name="CheckId" />

src/screens/FirmwareUpdate/03-MCU.js

@@ -1,7 +1,7 @@
 /* @flow */
 /* eslint-disable no-console */
 import React, { Component } from "react";
-import { View, Dimensions, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-navigation";
 import type { NavigationScreenProp } from "react-navigation";
 import { from, of } from "rxjs";
@@ -18,6 +18,7 @@ import colors from "../../colors";
 import DeviceNanoAction from "../../components/DeviceNanoAction";
 import StepHeader from "../../components/StepHeader";
 import { BulletItem } from "../../components/BulletList";
+import getWindowDimensions from "../../logic/getWindowDimensions";
 import Installing from "./Installing";
 
 type Navigation = NavigationScreenProp<{
@@ -108,7 +109,7 @@ class FirmwareUpdateMCU extends Component<Props, State> {
 
   render() {
     const { installing } = this.state;
-    const windowWidth = Dimensions.get("window").width;
+    const windowWidth = getWindowDimensions().width;
     return (
       <SafeAreaView style={styles.root}>
         <TrackScreen category="FirmwareUpdate" name="MCU" />

src/screens/ImportAccounts/Scan.js

@@ -1,6 +1,6 @@
 /* @flow */
 import React, { PureComponent } from "react";
-import { StyleSheet, View, Dimensions } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { RNCamera } from "react-native-camera";
 import type { NavigationScreenProp } from "react-navigation";
 import {
@@ -20,17 +20,12 @@ import StyledStatusBar from "../../components/StyledStatusBar";
 import FallBackCamera from "./FallBackCamera";
 import CameraScreen from "../../components/CameraScreen";
 import GenericErrorBottomModal from "../../components/GenericErrorBottomModal";
+import getWindowDimensions from "../../logic/getWindowDimensions";
 
 type Props = {
   navigation: NavigationScreenProp<*>,
 };
 
-const getDimensions = () => {
-  const { width, height } = Dimensions.get("window");
-
-  return { width, height };
-};
-
 class Scan extends PureComponent<
   Props,
   {
@@ -55,7 +50,7 @@ class Scan extends PureComponent<
   state = {
     progress: 0,
     error: null,
-    ...getDimensions(),
+    ...getWindowDimensions(),
   };
 
   componentDidMount() {
@@ -111,7 +106,7 @@ class Scan extends PureComponent<
   };
 
   setDimensions = () => {
-    const dimensions = getDimensions();
+    const dimensions = getWindowDimensions();
 
     this.setState(dimensions);
   };

src/screens/Onboarding/steps/security-checklist.js

@@ -2,13 +2,7 @@
 
 import React, { Component, createRef } from "react";
 import { Trans } from "react-i18next";
-import {
-  StyleSheet,
-  View,
-  Linking,
-  ScrollView,
-  Dimensions,
-} from "react-native";
+import { StyleSheet, View, Linking, ScrollView } from "react-native";
 
 import { TrackScreen } from "../../../analytics";
 import LText from "../../../components/LText";
@@ -22,10 +16,11 @@ import { Bullet } from "../../../components/BulletList";
 import colors, { rgba } from "../../../colors";
 import { urls } from "../../../config/urls";
 import IconWarning from "../../../icons/Warning";
+import getWindowDimensions from "../../../logic/getWindowDimensions";
 
 import type { OnboardingStepProps } from "../types";
 
-const windowWidth = Dimensions.get("window").width;
+const windowWidth = getWindowDimensions().width;
 
 type SecurityChecklist = {
   pinCode: ?boolean,

src/screens/PairDevices/PendingGenuineCheck.js

@@ -1,15 +1,16 @@
 // @flow
 
 import React, { PureComponent } from "react";
-import { View, StyleSheet, Dimensions } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { Trans } from "react-i18next";
 
 import colors from "../../colors";
 import { TrackScreen } from "../../analytics";
+import getWindowDimensions from "../../logic/getWindowDimensions";
 import DeviceNanoAction from "../../components/DeviceNanoAction";
 import LText from "../../components/LText";
 
-const { width } = Dimensions.get("window");
+const { width } = getWindowDimensions();
 
 class PendingGenuineCheck extends PureComponent<*> {
   render() {

src/screens/ReceiveFunds/03-Confirmation.js

@@ -2,13 +2,7 @@
 
 import React, { Component } from "react";
 import i18next from "i18next";
-import {
-  View,
-  StyleSheet,
-  Dimensions,
-  Linking,
-  ScrollView,
-} from "react-native";
+import { View, StyleSheet, Linking, ScrollView } from "react-native";
 import { SafeAreaView } from "react-navigation";
 import { createStructuredSelector } from "reselect";
 import { connect } from "react-redux";
@@ -20,6 +14,7 @@ import type { Account } from "@ledgerhq/live-common/lib/types";
 import getAddress from "@ledgerhq/live-common/lib/hw/getAddress";
 
 import { open } from "../../logic/hw";
+import getWindowDimensions from "../../logic/getWindowDimensions";
 import { accountScreenSelector } from "../../reducers/accounts";
 import colors from "../../colors";
 import { TrackScreen } from "../../analytics";
@@ -159,7 +154,7 @@ class ReceiveConfirmation extends Component<Props, State> {
   render(): React$Node {
     const { account, navigation } = this.props;
     const { verified, error, isModalOpened, onModalHide, zoom } = this.state;
-    const { width } = Dimensions.get("window");
+    const { width } = getWindowDimensions();
     const unsafe = !navigation.getParam("deviceId");
     const allowNavigation = navigation.getParam("allowNavigation");
     const QRSize = Math.round(width / 1.8 - 16);

src/screens/SendFunds/ScanRecipient.js

@@ -1,6 +1,6 @@
 /* @flow */
 import React, { PureComponent } from "react";
-import { StyleSheet, View, Dimensions } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { RNCamera } from "react-native-camera";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -17,6 +17,7 @@ import StyledStatusBar from "../../components/StyledStatusBar";
 import CameraScreen from "../../components/CameraScreen";
 import colors from "../../colors";
 import FallBackCamera from "./FallbackCamera/Fallback";
+import getWindowDimensions from "../../logic/getWindowDimensions";
 
 type Props = {
   navigation: NavigationScreenProp<{
@@ -30,12 +31,6 @@ type State = {
   height: number,
 };
 
-const getDimensions = () => {
-  const { width, height } = Dimensions.get("window");
-
-  return { width, height };
-};
-
 class ScanRecipient extends PureComponent<Props, State> {
   static navigationOptions = ({
     navigation,
@@ -54,7 +49,7 @@ class ScanRecipient extends PureComponent<Props, State> {
   });
 
   state = {
-    ...getDimensions(),
+    ...getWindowDimensions(),
   };
 
   lastData: ?string = null;
@@ -96,7 +91,7 @@ class ScanRecipient extends PureComponent<Props, State> {
   };
 
   setDimensions = () => {
-    const dimensions = getDimensions();
+    const dimensions = getWindowDimensions();
 
     this.setState(dimensions);
   };