diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js
--- a/native/account/registration/connect-ethereum.react.js
+++ b/native/account/registration/connect-ethereum.react.js
@@ -5,6 +5,7 @@
 
 import RegistrationButtonContainer from './registration-button-container.react.js';
 import RegistrationButton from './registration-button.react.js';
+import RegistrationContainer from './registration-container.react.js';
 import RegistrationContentContainer from './registration-content-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import type { CoolOrNerdMode } from './registration-types.js';
@@ -108,39 +109,36 @@
   const onSkip = React.useCallback(() => {}, []);
 
   return (
-    <View style={styles.container}>
-      <RegistrationContentContainer style={styles.scrollViewContentContainer}>
-        <Text style={styles.header}>
-          Do you want to connect an Ethereum Wallet to your account?
-        </Text>
-        {body}
-        <View style={styles.ethereumLogoContainer}>
-          <EthereumLogoDark />
-        </View>
-      </RegistrationContentContainer>
-      <RegistrationButtonContainer>
-        <RegistrationButton
-          onPress={openPanel}
-          label="Connect Ethereum wallet"
-          variant={panelState === 'opening' ? 'loading' : 'enabled'}
-        />
-        <RegistrationButton
-          onPress={onSkip}
-          label="Do not connect"
-          variant="outline"
-        />
-      </RegistrationButtonContainer>
+    <>
+      <RegistrationContainer>
+        <RegistrationContentContainer style={styles.scrollViewContentContainer}>
+          <Text style={styles.header}>
+            Do you want to connect an Ethereum Wallet to your account?
+          </Text>
+          {body}
+          <View style={styles.ethereumLogoContainer}>
+            <EthereumLogoDark />
+          </View>
+        </RegistrationContentContainer>
+        <RegistrationButtonContainer>
+          <RegistrationButton
+            onPress={openPanel}
+            label="Connect Ethereum wallet"
+            variant={panelState === 'opening' ? 'loading' : 'enabled'}
+          />
+          <RegistrationButton
+            onPress={onSkip}
+            label="Do not connect"
+            variant="outline"
+          />
+        </RegistrationButtonContainer>
+      </RegistrationContainer>
       {siwePanel}
-    </View>
+    </>
   );
 }
 
 const unboundStyles = {
-  container: {
-    backgroundColor: 'panelBackground',
-    justifyContent: 'space-between',
-    flex: 1,
-  },
   scrollViewContentContainer: {
     flexGrow: 1,
   },
diff --git a/native/account/registration/cool-or-nerd-mode-selection.react.js b/native/account/registration/cool-or-nerd-mode-selection.react.js
--- a/native/account/registration/cool-or-nerd-mode-selection.react.js
+++ b/native/account/registration/cool-or-nerd-mode-selection.react.js
@@ -2,10 +2,11 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { Text, View } from 'react-native';
+import { Text } from 'react-native';
 
 import RegistrationButtonContainer from './registration-button-container.react.js';
 import RegistrationButton from './registration-button.react.js';
+import RegistrationContainer from './registration-container.react.js';
 import RegistrationContentContainer from './registration-content-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import {
@@ -48,7 +49,7 @@
   const buttonState = currentSelection ? 'enabled' : 'disabled';
   const styles = useStyles(unboundStyles);
   return (
-    <View style={styles.container}>
+    <RegistrationContainer>
       <RegistrationContentContainer>
         <Text style={styles.header}>To begin, choose your fighter</Text>
         <Text style={styles.body}>
@@ -92,16 +93,11 @@
           variant={buttonState}
         />
       </RegistrationButtonContainer>
-    </View>
+    </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
-  container: {
-    backgroundColor: 'panelBackground',
-    justifyContent: 'space-between',
-    flex: 1,
-  },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -2,10 +2,11 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { Text, TextInput, View } from 'react-native';
+import { Text, TextInput } from 'react-native';
 
 import RegistrationButtonContainer from './registration-button-container.react.js';
 import RegistrationButton from './registration-button.react.js';
+import RegistrationContainer from './registration-container.react.js';
 import RegistrationContentContainer from './registration-content-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import {
@@ -78,7 +79,7 @@
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   return (
-    <View style={styles.container}>
+    <RegistrationContainer>
       <RegistrationContentContainer>
         <Text style={styles.header}>Select a keyserver to join</Text>
         <Text style={styles.body}>
@@ -132,16 +133,11 @@
           variant={buttonState}
         />
       </RegistrationButtonContainer>
-    </View>
+    </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
-  container: {
-    backgroundColor: 'panelBackground',
-    justifyContent: 'space-between',
-    flex: 1,
-  },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
diff --git a/native/account/registration/registration-container.react.js b/native/account/registration/registration-container.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/registration-container.react.js
@@ -0,0 +1,36 @@
+// @flow
+
+import * as React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useStyles } from '../../themes/colors.js';
+import type { ViewStyle } from '../../types/styles.js';
+
+const safeAreaEdges = ['bottom'];
+
+type Props = {
+  +children: React.Node,
+  +style?: ViewStyle,
+};
+function RegistrationContainer(props: Props): React.Node {
+  const styles = useStyles(unboundStyles);
+  const style = React.useMemo(
+    () => [styles.container, props.style],
+    [styles.container, props.style],
+  );
+  return (
+    <SafeAreaView style={style} edges={safeAreaEdges}>
+      {props.children}
+    </SafeAreaView>
+  );
+}
+
+const unboundStyles = {
+  container: {
+    flex: 1,
+    backgroundColor: 'panelBackground',
+    justifyContent: 'space-between',
+  },
+};
+
+export default RegistrationContainer;
diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js
--- a/native/account/registration/registration-navigator.react.js
+++ b/native/account/registration/registration-navigator.react.js
@@ -6,7 +6,6 @@
   type StackNavigationHelpers,
 } from '@react-navigation/stack';
 import * as React from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 import ConnectEthereum from './connect-ethereum.react.js';
 import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
@@ -19,9 +18,6 @@
   type ScreenParamList,
   type RegistrationParamList,
 } from '../../navigation/route-names.js';
-import { useStyles } from '../../themes/colors.js';
-
-const safeAreaEdges = ['bottom'];
 
 export type RegistrationNavigationProp<
   RouteName: $Keys<RegistrationParamList> = $Keys<RegistrationParamList>,
@@ -49,32 +45,22 @@
 };
 // eslint-disable-next-line no-unused-vars
 function RegistrationNavigator(props: Props): React.Node {
-  const styles = useStyles(unboundStyles);
   return (
-    <SafeAreaView style={styles.container} edges={safeAreaEdges}>
-      <Registration.Navigator screenOptions={screenOptions}>
-        <Registration.Screen
-          name={CoolOrNerdModeSelectionRouteName}
-          component={CoolOrNerdModeSelection}
-        />
-        <Registration.Screen
-          name={KeyserverSelectionRouteName}
-          component={KeyserverSelection}
-        />
-        <Registration.Screen
-          name={ConnectEthereumRouteName}
-          component={ConnectEthereum}
-        />
-      </Registration.Navigator>
-    </SafeAreaView>
+    <Registration.Navigator screenOptions={screenOptions}>
+      <Registration.Screen
+        name={CoolOrNerdModeSelectionRouteName}
+        component={CoolOrNerdModeSelection}
+      />
+      <Registration.Screen
+        name={KeyserverSelectionRouteName}
+        component={KeyserverSelection}
+      />
+      <Registration.Screen
+        name={ConnectEthereumRouteName}
+        component={ConnectEthereum}
+      />
+    </Registration.Navigator>
   );
 }
 
-const unboundStyles = {
-  container: {
-    flex: 1,
-    backgroundColor: 'panelBackground',
-  },
-};
-
 export default RegistrationNavigator;