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,13 +2,14 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { Text, TextInput } 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 RegistrationTextInput from './registration-text-input.react.js';
 import {
   RegistrationTile,
   RegistrationTileHeader,
@@ -50,15 +51,8 @@
       customKeyserverTextInputRef.current?.focus();
     }
   }, [customKeyserverEmpty]);
-
-  const [customKeyserverInputFocused, setCustomKeyserverInputFocused] =
-    React.useState(false);
   const onCustomKeyserverFocus = React.useCallback(() => {
     setCurrentSelection('custom');
-    setCustomKeyserverInputFocused(true);
-  }, []);
-  const onCustomKeyserverBlur = React.useCallback(() => {
-    setCustomKeyserverInputFocused(false);
   }, []);
 
   let keyserverUsername;
@@ -84,18 +78,6 @@
   }, [navigate, coolOrNerdMode, keyserverUsername]);
 
   const styles = useStyles(unboundStyles);
-  const keyserverInputStyle = React.useMemo(
-    () =>
-      customKeyserverInputFocused
-        ? [styles.keyserverInput, styles.focusedKeyserverInput]
-        : styles.keyserverInput,
-    [
-      customKeyserverInputFocused,
-      styles.keyserverInput,
-      styles.focusedKeyserverInput,
-    ],
-  );
-
   const colors = useColors();
   return (
     <RegistrationContainer>
@@ -134,14 +116,11 @@
           <RegistrationTileHeader>
             <Text style={styles.tileTitleText}>Enter a keyserver</Text>
           </RegistrationTileHeader>
-          <TextInput
+          <RegistrationTextInput
             value={customKeyserver}
             onChangeText={setCustomKeyserver}
-            style={keyserverInputStyle}
-            placeholderTextColor={colors.panelSecondaryForegroundBorder}
             placeholder="Keyserver"
             onFocus={onCustomKeyserverFocus}
-            onBlur={onCustomKeyserverBlur}
             ref={customKeyserverTextInputRef}
           />
         </RegistrationTile>
@@ -181,16 +160,6 @@
   cloud: {
     marginRight: 8,
   },
-  keyserverInput: {
-    color: 'panelForegroundLabel',
-    borderColor: 'panelSecondaryForegroundBorder',
-    borderWidth: 1,
-    borderRadius: 4,
-    padding: 12,
-  },
-  focusedKeyserverInput: {
-    borderColor: 'panelForegroundLabel',
-  },
 };
 
 export default KeyserverSelection;
diff --git a/native/account/registration/registration-text-input.react.js b/native/account/registration/registration-text-input.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/registration-text-input.react.js
@@ -0,0 +1,80 @@
+// @flow
+
+import * as React from 'react';
+import { TextInput } from 'react-native';
+
+import { useStyles, useColors } from '../../themes/colors.js';
+
+type Props = React.ElementConfig<typeof TextInput>;
+
+function ForwardedRegistrationTextInput(props: Props, ref): React.Node {
+  const { onFocus, onBlur, style, placeholderTextColor, ...rest } = props;
+
+  const [focused, setFocused] = React.useState(false);
+  const ourOnFocus = React.useCallback(
+    event => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+  const ourOnBlur = React.useCallback(
+    event => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur],
+  );
+
+  const styles = useStyles(unboundStyles);
+  const ourStyle = React.useMemo(
+    () =>
+      focused
+        ? [styles.textInput, styles.focusedTextInput, style]
+        : [styles.textInput, style],
+    [focused, styles.textInput, styles.focusedTextInput, style],
+  );
+
+  const colors = useColors();
+  const ourPlaceholderTextColor =
+    placeholderTextColor ?? colors.panelSecondaryForegroundBorder;
+
+  return (
+    <TextInput
+      {...rest}
+      style={ourStyle}
+      placeholderTextColor={ourPlaceholderTextColor}
+      onFocus={ourOnFocus}
+      onBlur={ourOnBlur}
+      ref={ref}
+    />
+  );
+}
+
+const unboundStyles = {
+  textInput: {
+    color: 'panelForegroundLabel',
+    borderColor: 'panelSecondaryForegroundBorder',
+    borderWidth: 1,
+    borderRadius: 4,
+    padding: 12,
+  },
+  focusedTextInput: {
+    borderColor: 'panelForegroundLabel',
+  },
+};
+
+const RegistrationTextInput: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof TextInput>,
+> = React.forwardRef<Props, React.ElementRef<typeof TextInput>>(
+  ForwardedRegistrationTextInput,
+);
+RegistrationTextInput.displayName = 'RegistrationTextInput';
+
+const MemoizedRegistrationTextInput: typeof RegistrationTextInput = React.memo<
+  Props,
+  React.ElementRef<typeof TextInput>,
+>(RegistrationTextInput);
+
+export default MemoizedRegistrationTextInput;