diff --git a/BlueComponents.js b/BlueComponents.js
index ebf057236..85ff9f706 100644
--- a/BlueComponents.js
+++ b/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 => {
diff --git a/screen/lnd/lndViewAdditionalInvoiceInformation.js b/screen/lnd/lndViewAdditionalInvoiceInformation.js
index 74125801a..3cbf2e6d1 100644
--- a/screen/lnd/lndViewAdditionalInvoiceInformation.js
+++ b/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',
diff --git a/screen/lnd/lndViewAdditionalInvoicePreImage.js b/screen/lnd/lndViewAdditionalInvoicePreImage.js
index 0685c401e..21634a56e 100644
--- a/screen/lnd/lndViewAdditionalInvoicePreImage.js
+++ b/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',
diff --git a/screen/lnd/lndViewInvoice.js b/screen/lnd/lndViewInvoice.js
index 6d966eed4..d05a009e8 100644
--- a/screen/lnd/lndViewInvoice.js
+++ b/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>
diff --git a/screen/lnd/lnurlPay.js b/screen/lnd/lnurlPay.js
index bdddf00e4..a7b4664e1 100644
--- a/screen/lnd/lnurlPay.js
+++ b/screen/lnd/lnurlPay.js
@@ -157,7 +157,7 @@ export default class LnurlPay extends Component {
 
   renderGotPayload() {
     return (
-      <SafeBlueArea style={styles.root}>
+      <SafeBlueArea>
         <ScrollView>
           <BlueCard>
             <AmountInput
diff --git a/screen/lnd/lnurlPaySuccess.js b/screen/lnd/lnurlPaySuccess.js
index 83e9184f9..f10d49e61 100644
--- a/screen/lnd/lnurlPaySuccess.js
+++ b/screen/lnd/lnurlPaySuccess.js
@@ -163,8 +163,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   root: {
-    flex: 1,
-    paddingTop: 0,
+    padding: 0,
   },
   iconContainer: {
     backgroundColor: '#ccddf9',
diff --git a/screen/lnd/scanLndInvoice.js b/screen/lnd/scanLndInvoice.js
index 33f292aad..ab2f0e002 100644
--- a/screen/lnd/scanLndInvoice.js
+++ b/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}>
diff --git a/screen/plausibledeniability.js b/screen/plausibledeniability.js
index 8a085f3eb..0d92996cb 100644
--- a/screen/plausibledeniability.js
+++ b/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>
diff --git a/screen/selftest.js b/screen/selftest.js
index 04133534c..96f455f8b 100644
--- a/screen/selftest.js
+++ b/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 />
diff --git a/screen/send/broadcast.js b/screen/send/broadcast.js
index 1a96df9ce..0db17d888 100644
--- a/screen/send/broadcast.js
+++ b/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',
diff --git a/screen/send/coinControl.js b/screen/send/coinControl.js
index 070bf5de7..60329a59b 100644
--- a/screen/send/coinControl.js
+++ b/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>
     );
diff --git a/screen/send/confirm.js b/screen/send/confirm.js
index 9c13f7eed..fd0ee15c6 100644
--- a/screen/send/confirm.js
+++ b/screen/send/confirm.js
@@ -269,7 +269,6 @@ const styles = StyleSheet.create({
     margin: 16,
   },
   root: {
-    flex: 1,
     paddingTop: 19,
     backgroundColor: BlueCurrentTheme.colors.elevated,
   },
diff --git a/screen/send/create.js b/screen/send/create.js
index 6c04ad65e..5665bf835 100644
--- a/screen/send/create.js
+++ b/screen/send/create.js
@@ -210,7 +210,6 @@ const styles = StyleSheet.create({
     marginVertical: 16,
   },
   root: {
-    flex: 1,
     backgroundColor: BlueCurrentTheme.colors.elevated,
   },
   card: {
diff --git a/screen/send/isItMyAddress.js b/screen/send/isItMyAddress.js
index 2a7ffc413..3e9023e1a 100644
--- a/screen/send/isItMyAddress.js
+++ b/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: {
diff --git a/screen/send/psbtMultisig.js b/screen/send/psbtMultisig.js
index 176e79eac..5da0e656f 100644
--- a/screen/send/psbtMultisig.js
+++ b/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',
diff --git a/screen/send/psbtMultisigQRCode.js b/screen/send/psbtMultisigQRCode.js
index ed76c506e..d4c82d034 100644
--- a/screen/send/psbtMultisigQRCode.js
+++ b/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',
diff --git a/screen/send/psbtWithHardwareWallet.js b/screen/send/psbtWithHardwareWallet.js
index 3978d638f..ce1375a3e 100644
--- a/screen/send/psbtWithHardwareWallet.js
+++ b/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',
diff --git a/screen/settings/NetworkSettings.js b/screen/settings/NetworkSettings.js
index de3f07407..42337d320 100644
--- a/screen/settings/NetworkSettings.js
+++ b/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 />
diff --git a/screen/settings/about.js b/screen/settings/about.js
index 30f8ef373..6e7ef26ba 100644
--- a/screen/settings/about.js
+++ b/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}>
diff --git a/screen/settings/currency.js b/screen/settings/currency.js
index 4ea3bbd84..e03c617e0 100644
--- a/screen/settings/currency.js
+++ b/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}`}
diff --git a/screen/settings/defaultView.js b/screen/settings/defaultView.js
index 7198aeb38..2c460e7ee 100644
--- a/screen/settings/defaultView.js
+++ b/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}
diff --git a/screen/settings/electrumSettings.js b/screen/settings/electrumSettings.js
index 5e488ba7d..e5151e05e 100644
--- a/screen/settings/electrumSettings.js
+++ b/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,
diff --git a/screen/settings/encryptStorage.js b/screen/settings/encryptStorage.js
index 7a3eb7fbf..5e84469e5 100644
--- a/screen/settings/encryptStorage.js
+++ b/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 && (
           <>
diff --git a/screen/settings/language.js b/screen/settings/language.js
index fc70d4f36..fa2200b57 100644
--- a/screen/settings/language.js
+++ b/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}`}
diff --git a/screen/settings/licensing.js b/screen/settings/licensing.js
index 2c399ff88..ad81766fc 100644
--- a/screen/settings/licensing.js
+++ b/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>
diff --git a/screen/settings/lightningSettings.js b/screen/settings/lightningSettings.js
index 5133f2492..d04335e26 100644
--- a/screen/settings/lightningSettings.js
+++ b/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>
diff --git a/screen/settings/releasenotes.js b/screen/settings/releasenotes.js
index e4e3bb32f..33a05a88f 100644
--- a/screen/settings/releasenotes.js
+++ b/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>
diff --git a/screen/transactions/CPFP.js b/screen/transactions/CPFP.js
index ef1039b46..283cd9321 100644
--- a/screen/transactions/CPFP.js
+++ b/screen/transactions/CPFP.js
@@ -31,7 +31,6 @@ const styles = StyleSheet.create({
     paddingTop: 20,
   },
   explain: {
-    flex: 1,
     paddingBottom: 16,
   },
   center: {
diff --git a/screen/transactions/RBFCancel.js b/screen/transactions/RBFCancel.js
index bce289578..3f8e31420 100644
--- a/screen/transactions/RBFCancel.js
+++ b/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>
     );
diff --git a/screen/transactions/details.js b/screen/transactions/details.js
index cd2133282..c94b80997 100644
--- a/screen/transactions/details.js
+++ b/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,
   },
diff --git a/screen/transactions/transactionStatus.js b/screen/transactions/transactionStatus.js
index 841432d22..3880148a7 100644
--- a/screen/transactions/transactionStatus.js
+++ b/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',
diff --git a/screen/wallets/addMultisigHelp.js b/screen/wallets/addMultisigHelp.js
index c929a6fe9..2899cd905 100644
--- a/screen/wallets/addMultisigHelp.js
+++ b/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>
diff --git a/screen/wallets/buyBitcoin.js b/screen/wallets/buyBitcoin.js
index f2e00342c..79abe6792 100644
--- a/screen/wallets/buyBitcoin.js
+++ b/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={{
diff --git a/screen/wallets/details.js b/screen/wallets/details.js
index 6b8373ba6..4b31764ad 100644
--- a/screen/wallets/details.js
+++ b/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">
diff --git a/screen/wallets/export.js b/screen/wallets/export.js
index 5b46e8d16..42fe39816 100644
--- a/screen/wallets/export.js
+++ b/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 },
diff --git a/screen/wallets/exportMultisigCoordinationSetup.js b/screen/wallets/exportMultisigCoordinationSetup.js
index c473395e1..2ab5a9ef8 100644
--- a/screen/wallets/exportMultisigCoordinationSetup.js
+++ b/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',
diff --git a/screen/wallets/import.js b/screen/wallets/import.js
index 70061c14b..71f12dde4 100644
--- a/screen/wallets/import.js
+++ b/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>
diff --git a/screen/wallets/pleaseBackup.js b/screen/wallets/pleaseBackup.js
index 6e0b008d1..2d164efff 100644
--- a/screen/wallets/pleaseBackup.js
+++ b/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',
diff --git a/screen/wallets/pleaseBackupLNDHub.js b/screen/wallets/pleaseBackupLNDHub.js
index eb3127f7e..c57280ba6 100644
--- a/screen/wallets/pleaseBackupLNDHub.js
+++ b/screen/wallets/pleaseBackupLNDHub.js
@@ -24,7 +24,6 @@ const PleaseBackupLNDHub = () => {
   }, [navigation]);
   const styles = StyleSheet.create({
     root: {
-      flex: 1,
       backgroundColor: colors.elevated,
     },
     scrollViewContent: {
diff --git a/screen/wallets/selectWallet.js b/screen/wallets/selectWallet.js
index a870b6e80..283426a75 100644
--- a/screen/wallets/selectWallet.js
+++ b/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>