FIX: Remove custom styles applied to SafeBlueArea, and their defs

BlueComponents.js

@@ -577,8 +577,10 @@ const styleCopyTextToClipboard = StyleSheet.create({
 });
 
 export const SafeBlueArea = props => {
+  const { style, ...nonStyleProps } = props;
   const { colors } = useTheme();
-  return <SafeAreaView forceInset={{ horizontal: 'always' }} style={{ flex: 1, backgroundColor: colors.background }} {...props} />;
+  const baseStyle = { flex: 1, backgroundColor: colors.background }
+  return <SafeAreaView forceInset={{ horizontal: 'always' }} style={[baseStyle, style]} {...nonStyleProps} />;
 };
 
 export const BlueCard = props => {

screen/lnd/lndViewAdditionalInvoiceInformation.js

@@ -51,7 +51,7 @@ const LNDViewAdditionalInvoiceInformation = () => {
   }
 
   return (
-    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea style={stylesHook.root}>
       <View style={styles.wrapper}>
         <View style={styles.qrcode}>
           <QRCode
@@ -89,13 +89,9 @@ const LNDViewAdditionalInvoiceInformation = () => {
 
 const styles = StyleSheet.create({
   loading: {
-    flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  root: {
-    flex: 1,
-  },
   wrapper: {
     flex: 1,
     justifyContent: 'center',

screen/lnd/lndViewAdditionalInvoicePreImage.js

@@ -18,7 +18,7 @@ const LNDViewAdditionalInvoicePreImage = () => {
   });
 
   return (
-    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea style={stylesHook.root}>
       <View style={styles.wrapper}>
         <BlueTextCentered>{loc.lndViewInvoice.preimage}:</BlueTextCentered>
         <BlueSpacing20 />
@@ -41,9 +41,6 @@ const LNDViewAdditionalInvoicePreImage = () => {
 };
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   wrapper: {
     flex: 1,
     justifyContent: 'center',

screen/lnd/lndViewInvoice.js

@@ -273,7 +273,7 @@ const LNDViewInvoice = () => {
   };
 
   return (
-    <SafeBlueArea styles={[styles.root, stylesHook.root]} onLayout={onLayout}>
+    <SafeBlueArea onLayout={onLayout}>
       <StatusBar barStyle="default" />
       <ScrollView>{render()}</ScrollView>
     </SafeBlueArea>

screen/lnd/lnurlPay.js

@@ -157,7 +157,7 @@ export default class LnurlPay extends Component {
 
   renderGotPayload() {
     return (
-      <SafeBlueArea style={styles.root}>
+      <SafeBlueArea>
         <ScrollView>
           <BlueCard>
             <AmountInput

screen/lnd/lnurlPaySuccess.js

@@ -163,8 +163,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   root: {
-    flex: 1,
-    paddingTop: 0,
+    padding: 0,
   },
   iconContainer: {
     backgroundColor: '#ccddf9',

screen/lnd/scanLndInvoice.js

@@ -284,7 +284,7 @@ const ScanLndInvoice = () => {
   }
 
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea style={stylesHook.root}>
       <StatusBar barStyle="light-content" />
       <View style={[styles.root, stylesHook.root]}>
         <ScrollView contentContainerStyle={styles.scroll}>

screen/plausibledeniability.js

@@ -1,7 +1,7 @@
 /* global alert */
 import React, { useContext, useState } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 
 import navigationStyle from '../components/navigationStyle';
@@ -10,22 +10,10 @@ import loc from '../loc';
 import { BlueStorageContext } from '../blue_modules/storage-context';
 const prompt = require('../blue_modules/prompt');
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-});
-
 const PlausibleDeniability = () => {
   const { cachedPassword, isPasswordInUse, createFakeStorage, resetWallets } = useContext(BlueStorageContext);
   const [isLoading, setIsLoading] = useState(false);
   const { popToTop } = useNavigation();
-  const { colors } = useTheme();
-  const stylesHook = StyleSheet.create({
-    root: {
-      backgroundColor: colors.background,
-    },
-  });
 
   const handleOnCreateFakeStorageButtonPressed = async () => {
     setIsLoading(true);
@@ -59,11 +47,11 @@ const PlausibleDeniability = () => {
   };
 
   return isLoading ? (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea>
       <BlueLoading />
     </SafeBlueArea>
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea>
       <BlueCard>
         <ScrollView maxHeight={450}>
           <BlueText>{loc.plausibledeniability.help}</BlueText>

screen/selftest.js

@@ -6,17 +6,12 @@ import loc from '../loc';
 import { BlueSpacing20, SafeBlueArea, BlueCard, BlueText, BlueLoading } from '../BlueComponents';
 import navigationStyle from '../components/navigationStyle';
 import { SegwitP2SHWallet, LegacyWallet, HDSegwitP2SHWallet, HDSegwitBech32Wallet, HDAezeedWallet } from '../class';
-import { BlueCurrentTheme } from '../components/themes';
 const bitcoin = require('bitcoinjs-lib');
 const BlueCrypto = require('react-native-blue-crypto');
 const encryption = require('../blue_modules/encryption');
 const BlueElectrum = require('../blue_modules/BlueElectrum');
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    backgroundColor: BlueCurrentTheme.colors.background,
-  },
   center: {
     alignItems: 'center',
   },
@@ -226,7 +221,7 @@ export default class Selftest extends Component {
     }
 
     return (
-      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+      <SafeBlueArea>
         <BlueCard>
           <ScrollView>
             <BlueSpacing20 />

screen/send/broadcast.js

@@ -116,7 +116,7 @@ const Broadcast = () => {
   }
 
   return (
-    <SafeBlueArea style={styles.blueArea}>
+    <SafeBlueArea>
       <KeyboardAvoidingView
         enabled={!Platform.isPad}
         behavior={Platform.OS === 'ios' ? 'position' : null}
@@ -176,9 +176,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-start',
   },
-  blueArea: {
-    flex: 1,
-  },
   broadcastResultWrapper: {
     flex: 1,
     flexDirection: 'column',

screen/send/coinControl.js

@@ -388,7 +388,7 @@ const CoinControl = () => {
 
   if (loading) {
     return (
-      <SafeBlueArea style={[styles.root, styles.center, { backgroundColor: colors.elevated }]}>
+      <SafeBlueArea style={[styles.center, { backgroundColor: colors.elevated }]}>
         <ActivityIndicator testID="Loading" />
       </SafeBlueArea>
     );

screen/send/confirm.js

@@ -269,7 +269,6 @@ const styles = StyleSheet.create({
     margin: 16,
   },
   root: {
-    flex: 1,
     paddingTop: 19,
     backgroundColor: BlueCurrentTheme.colors.elevated,
   },

screen/send/create.js

@@ -210,7 +210,6 @@ const styles = StyleSheet.create({
     marginVertical: 16,
   },
   root: {
-    flex: 1,
     backgroundColor: BlueCurrentTheme.colors.elevated,
   },
   card: {

screen/send/isItMyAddress.js

@@ -21,9 +21,6 @@ const IsItMyAddress = () => {
   const [result, setResult] = useState('');
 
   const stylesHooks = StyleSheet.create({
-    blueArea: {
-      backgroundColor: colors.background,
-    },
     text: {
       color: colors.foregroundColor,
     },
@@ -78,7 +75,7 @@ const IsItMyAddress = () => {
   };
 
   return (
-    <SafeBlueArea style={[styles.blueArea, stylesHooks.blueArea]}>
+    <SafeBlueArea style={styles.blueArea}>
       <KeyboardAvoidingView
         enabled={!Platform.isPad}
         behavior={Platform.OS === 'ios' ? 'position' : null}
@@ -133,7 +130,6 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
   blueArea: {
-    flex: 1,
     paddingTop: 19,
   },
   broadcastResultWrapper: {

screen/send/psbtMultisig.js

@@ -264,7 +264,7 @@ const PsbtMultisig = () => {
   };
 
   return (
-    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea style={stylesHook.root}>
       <View style={styles.container}>
         <View style={styles.mstopcontainer}>
           <View style={styles.mscontainer}>
@@ -303,9 +303,6 @@ const PsbtMultisig = () => {
 };
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   mstopcontainer: {
     flex: 1,
     flexDirection: 'row',

screen/send/psbtMultisigQRCode.js

@@ -69,7 +69,7 @@ const PsbtMultisigQRCode = () => {
   };
 
   return (
-    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea style={stylesHook.root}>
       <ScrollView centerContent contentContainerStyle={styles.scrollViewContent}>
         <View style={[styles.modalContentShort, stylesHook.modalContentShort]}>
           <DynamicQRCode value={psbt.toHex()} />
@@ -98,9 +98,6 @@ const PsbtMultisigQRCode = () => {
 };
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   scrollViewContent: {
     flexGrow: 1,
     justifyContent: 'space-between',

screen/send/psbtWithHardwareWallet.js

@@ -272,7 +272,7 @@ const PsbtWithHardwareWallet = () => {
       <ActivityIndicator />
     </View>
   ) : (
-    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea style={stylesHook.root}>
       <ScrollView centerContent contentContainerStyle={styles.scrollViewContent} testID="PsbtWithHardwareScrollView">
         <View style={styles.container}>
           <BlueCard>
@@ -333,9 +333,6 @@ export default PsbtWithHardwareWallet;
 PsbtWithHardwareWallet.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.send.header }));
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   scrollViewContent: {
     flexGrow: 1,
     justifyContent: 'space-between',

screen/settings/NetworkSettings.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 
 import navigationStyle from '../../components/navigationStyle';
 import { SafeBlueArea, BlueListItem } from '../../BlueComponents';
@@ -8,13 +8,6 @@ import loc from '../../loc';
 
 const NetworkSettings = () => {
   const { navigate } = useNavigation();
-  const { colors } = useTheme();
-  const styles = StyleSheet.create({
-    root: {
-      flex: 1,
-      backgroundColor: colors.background,
-    },
-  });
 
   const navigateToElectrumSettings = () => {
     navigate('ElectrumSettings');
@@ -29,7 +22,7 @@ const NetworkSettings = () => {
   };
 
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea>
       <ScrollView>
         <BlueListItem title={loc.settings.network_electrum} onPress={navigateToElectrumSettings} testID="ElectrumSettings" chevron />
         <BlueListItem title={loc.settings.lightning_settings} onPress={navigateToLightningSettings} testID="LightningSettings" chevron />

screen/settings/about.js

@@ -14,9 +14,6 @@ const About = () => {
   const { colors } = useTheme();
   const { width, height } = useWindowDimensions();
   const styles = StyleSheet.create({
-    root: {
-      flex: 1,
-    },
     center: {
       justifyContent: 'center',
       alignItems: 'center',
@@ -105,7 +102,7 @@ const About = () => {
   };
 
   return (
-    <SafeBlueArea style={styles.root}>
+    <SafeBlueArea>
       <ScrollView testID="AboutScrollView">
         <BlueCard>
           <View style={styles.center}>

screen/settings/currency.js

@@ -46,7 +46,7 @@ const Currency = () => {
 
   if (selectedCurrency !== null && selectedCurrency !== undefined) {
     return (
-      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.flex}>
+      <SafeBlueArea>
         <FlatList
           style={styles.flex}
           keyExtractor={(_item, index) => `${index}`}

screen/settings/defaultView.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { View, TouchableWithoutFeedback, StyleSheet } from 'react-native';
+import { View, TouchableWithoutFeedback } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import navigationStyle from '../../components/navigationStyle';
@@ -8,12 +8,6 @@ import OnAppLaunch from '../../class/on-app-launch';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-});
-
 const DefaultView = () => {
   const [defaultWalletLabel, setDefaultWalletLabel] = useState('');
   const [viewAllWalletsEnabled, setViewAllWalletsEnabled] = useState(true);
@@ -58,7 +52,7 @@ const DefaultView = () => {
   };
 
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.flex}>
+    <SafeBlueArea>
       <View>
         <BlueListItem
           title={loc.settings.default_wallets}

screen/settings/electrumSettings.js

@@ -215,7 +215,7 @@ export default class ElectrumSettings extends Component {
     });
 
     return (
-      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+      <SafeBlueArea>
         <ScrollView>
           <BlueCard>
             <BlueText style={styles.status}>{loc.settings.electrum_status}</BlueText>
@@ -325,9 +325,6 @@ ElectrumSettings.propTypes = {
 ElectrumSettings.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.settings.electrum_settings_server }));
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   status: {
     textAlign: 'center',
     color: BlueCurrentTheme.colors.feeText,

screen/settings/encryptStorage.js

@@ -124,11 +124,11 @@ const EncryptStorage = () => {
   };
 
   return isLoading ? (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea>
       <BlueLoading />
     </SafeBlueArea>
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea>
       <ScrollView contentContainerStyle={styles.root}>
         {biometrics.isDeviceBiometricCapable && (
           <>

screen/settings/language.js

@@ -51,7 +51,7 @@ const Language = () => {
   return isLoading ? (
     <BlueLoading />
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.flex, stylesHook.flex]}>
+    <SafeBlueArea>
       <FlatList
         style={[styles.flex, stylesHook.flex]}
         keyExtractor={(_item, index) => `${index}`}

screen/settings/licensing.js

@@ -1,14 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import { ScrollView } from 'react-native';
 import navigationStyle from '../../components/navigationStyle';
 import { SafeBlueArea, BlueCard, BlueText, BlueSpacing20, BlueLoading } from '../../BlueComponents';
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-});
-
 const Licensing = () => {
   const [isLoading, setIsLoading] = useState(true);
 
@@ -19,7 +13,7 @@ const Licensing = () => {
   return isLoading ? (
     <BlueLoading />
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea>
       <ScrollView>
         <BlueCard>
           <BlueText>MIT License</BlueText>

screen/settings/lightningSettings.js

@@ -14,9 +14,6 @@ import { BlueCurrentTheme } from '../../components/themes';
 import DeeplinkSchemaMatch from '../../class/deeplink-schema-match';
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   uri: {
     flexDirection: 'row',
     borderColor: BlueCurrentTheme.colors.formBorder,
@@ -110,7 +107,7 @@ const LightningSettings = () => {
   };
 
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea>
       <BlueCard>
         <BlueText>{loc.settings.lightning_settings_explain}</BlueText>
       </BlueCard>

screen/settings/releasenotes.js

@@ -1,22 +1,14 @@
 import React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+import { ScrollView } from 'react-native';
 import navigationStyle from '../../components/navigationStyle';
 import { SafeBlueArea, BlueCard, BlueText } from '../../BlueComponents';
 import loc from '../../loc';
 
 const ReleaseNotes = () => {
   const notes = require('../../release-notes');
-  const { colors } = useTheme();
-  const styles = StyleSheet.create({
-    root: {
-      flex: 1,
-      backgroundColor: colors.background,
-    },
-  });
 
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea>
       <ScrollView>
         <BlueCard>
           <BlueText>{notes}</BlueText>

screen/transactions/CPFP.js

@@ -31,7 +31,6 @@ const styles = StyleSheet.create({
     paddingTop: 20,
   },
   explain: {
-    flex: 1,
     paddingBottom: 16,
   },
   center: {

screen/transactions/RBFCancel.js

@@ -1,7 +1,7 @@
 /* global alert */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ActivityIndicator, View, StyleSheet, ScrollView } from 'react-native';
+import { ActivityIndicator, View, ScrollView } from 'react-native';
 import { BlueSpacing20, SafeBlueArea, BlueText } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { HDSegwitBech32Transaction, HDSegwitBech32Wallet } from '../../class';
@@ -9,13 +9,6 @@ import CPFP from './CPFP';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 
-const styles = StyleSheet.create({
-  common: {
-    flex: 1,
-    paddingTop: 16,
-  },
-});
-
 export default class RBFCancel extends CPFP {
   static contextType = BlueStorageContext;
   async componentDidMount() {
@@ -83,7 +76,7 @@ export default class RBFCancel extends CPFP {
   render() {
     if (this.state.isLoading) {
       return (
-        <View style={styles.root}>
+        <View>
           <ActivityIndicator />
         </View>
       );
@@ -95,7 +88,7 @@ export default class RBFCancel extends CPFP {
 
     if (this.state.nonReplaceable) {
       return (
-        <SafeBlueArea style={styles.root}>
+        <SafeBlueArea>
           <BlueSpacing20 />
           <BlueSpacing20 />
           <BlueSpacing20 />
@@ -108,7 +101,7 @@ export default class RBFCancel extends CPFP {
     }
 
     return (
-      <SafeBlueArea style={styles.root}>
+      <SafeBlueArea>
         <ScrollView>{this.renderStage1(loc.transactions.cancel_explain)}</ScrollView>
       </SafeBlueArea>
     );

screen/transactions/details.js

@@ -140,7 +140,7 @@ const TransactionsDetails = () => {
   }
 
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea>
       <HandoffComponent
         title={`Bitcoin Transaction ${tx.hash}`}
         type="io.bluewallet.bluewallet"
@@ -249,9 +249,6 @@ const TransactionsDetails = () => {
 };
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   scroll: {
     flex: 1,
   },

screen/transactions/transactionStatus.js

@@ -40,9 +40,6 @@ const TransactionsStatus = () => {
   const [tx, setTX] = useState();
   const [isLoading, setIsLoading] = useState(true);
   const stylesHook = StyleSheet.create({
-    root: {
-      backgroundColor: colors.background,
-    },
     value: {
       color: colors.alternativeTextColor2,
     },
@@ -273,13 +270,13 @@ const TransactionsStatus = () => {
 
   if (isLoading || !tx) {
     return (
-      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.root, stylesHook.root]}>
+      <SafeBlueArea>
         <BlueLoading />
       </SafeBlueArea>
     );
   }
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea>
       <HandoffComponent
         title={`Bitcoin Transaction ${tx.hash}`}
         type="io.bluewallet.bluewallet"
@@ -363,9 +360,6 @@ const TransactionsStatus = () => {
 
 export default TransactionsStatus;
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   container: {
     flex: 1,
     justifyContent: 'space-between',

screen/wallets/addMultisigHelp.js

@@ -39,7 +39,7 @@ const WalletsAddMultisigHelp = () => {
   return isLoading ? (
     <BlueLoading />
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={stylesHook.root}>
+    <SafeBlueArea style={stylesHook.root}>
       <ScrollView>
         <View style={[styles.intro, stylesHook.intro]}>
           <Text style={[styles.introTitle, stylesHook.introTitle]}>{loc.multisig.ms_help_title}</Text>

screen/wallets/buyBitcoin.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, StatusBar, Linking, Platform } from 'react-native';
+import { StatusBar, Linking, Platform } from 'react-native';
 import { WebView } from 'react-native-webview';
 import InAppBrowser from 'react-native-inappbrowser-reborn';
 
@@ -11,12 +11,6 @@ import * as NavigationService from '../../NavigationService';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 const currency = require('../../blue_modules/currency');
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-});
-
 export default class BuyBitcoin extends Component {
   static contextType = BlueStorageContext;
   constructor(props) {
@@ -86,7 +80,7 @@ export default class BuyBitcoin extends Component {
     }
 
     return (
-      <SafeBlueArea style={styles.root}>
+      <SafeBlueArea>
         <StatusBar barStyle="default" />
         <WebView
           source={{

screen/wallets/details.js

@@ -399,7 +399,7 @@ const WalletDetails = () => {
       <BlueLoading />
     </View>
   ) : (
-    <SafeBlueArea style={styles.root}>
+    <SafeBlueArea>
       <StatusBar barStyle="default" />
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
         <ScrollView contentContainerStyle={styles.scrollViewContent} testID="WalletDetailsScroll">

screen/wallets/export.js

@@ -16,9 +16,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
-  root: {
-    flex: 1,
-  },
   scrollViewContent: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -52,7 +49,6 @@ const WalletExport = () => {
       backgroundColor: colors.elevated,
     },
     root: {
-      ...styles.root,
       backgroundColor: colors.elevated,
     },
     type: { ...styles.type, color: colors.foregroundColor },

screen/wallets/exportMultisigCoordinationSetup.js

@@ -72,7 +72,7 @@ const ExportMultisigCoordinationSetup = () => {
       <ActivityIndicator />
     </View>
   ) : (
-    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+    <SafeBlueArea style={stylesHook.root}>
       <StatusBar barStyle="light-content" />
       <ScrollView contentContainerStyle={styles.scrollViewContent}>
         <View>
@@ -98,9 +98,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
-  root: {
-    flex: 1,
-  },
   scrollViewContent: {
     alignItems: 'center',
     justifyContent: 'center',

screen/wallets/import.js

@@ -29,7 +29,6 @@ const WalletsImport = () => {
   const { colors } = useTheme();
   const styles = StyleSheet.create({
     root: {
-      flex: 1,
       paddingTop: 40,
       backgroundColor: colors.elevated,
     },
@@ -114,7 +113,7 @@ const WalletsImport = () => {
   };
 
   return (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
+    <SafeBlueArea style={styles.root}>
       <StatusBar barStyle="light-content" />
       <BlueSpacing20 />
       <BlueFormLabel>{loc.wallets.import_explanation}</BlueFormLabel>

screen/wallets/pleaseBackup.js

@@ -70,7 +70,7 @@ const PleaseBackup = () => {
       <ActivityIndicator />
     </View>
   ) : (
-    <SafeBlueArea style={[styles.flex, stylesHook.flex]}>
+    <SafeBlueArea style={stylesHook.flex}>
       <StatusBar barStyle="default" />
       <ScrollView testID="PleaseBackupScrollView">
         <View style={styles.please}>
@@ -99,9 +99,6 @@ PleaseBackup.navigationOptions = navigationStyle(
 );
 
 const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
   loading: {
     flex: 1,
     justifyContent: 'center',

screen/wallets/pleaseBackupLNDHub.js

@@ -24,7 +24,6 @@ const PleaseBackupLNDHub = () => {
   }, [navigation]);
   const styles = StyleSheet.create({
     root: {
-      flex: 1,
       backgroundColor: colors.elevated,
     },
     scrollViewContent: {

screen/wallets/selectWallet.js

@@ -27,10 +27,6 @@ const SelectWallet = () => {
     data = availableWallets;
   }
   const styles = StyleSheet.create({
-    root: {
-      flex: 1,
-      backgroundColor: colors.background,
-    },
     loading: {
       flex: 1,
       justifyContent: 'center',
@@ -153,7 +149,7 @@ const SelectWallet = () => {
     );
   } else if (data.length <= 0) {
     return (
-      <SafeBlueArea style={styles.root}>
+      <SafeBlueArea>
         <StatusBar barStyle="light-content" />
         <View style={styles.noWallets}>
           <BlueText style={styles.center}>{loc.wallets.select_no_bitcoin}</BlueText>
@@ -164,7 +160,7 @@ const SelectWallet = () => {
     );
   } else {
     return (
-      <SafeBlueArea style={styles.root}>
+      <SafeBlueArea>
         <StatusBar barStyle="default" />
         <FlatList extraData={data} data={data} renderItem={renderItem} keyExtractor={(_item, index) => `${index}`} />
       </SafeBlueArea>