diff --git a/native/account/registration/cool-or-nerd-mode-selection.react.js b/native/account/registration/cool-or-nerd-mode-selection.react.js
index f4313c6a5..91709b57e 100644
--- a/native/account/registration/cool-or-nerd-mode-selection.react.js
+++ b/native/account/registration/cool-or-nerd-mode-selection.react.js
@@ -1,125 +1,129 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import RegistrationButton from './registration-button.react.js';
 import RegistrationContainer from './registration-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import {
   RegistrationTile,
   RegistrationTileHeader,
 } from './registration-tile.react.js';
 import type { CoolOrNerdMode } from './registration-types.js';
 import {
   type NavigationRoute,
   KeyserverSelectionRouteName,
 } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
 
 type Props = {
   +navigation: RegistrationNavigationProp<'CoolOrNerdModeSelection'>,
   +route: NavigationRoute<'CoolOrNerdModeSelection'>,
 };
 function CoolOrNerdModeSelection(props: Props): React.Node {
   const [currentSelection, setCurrentSelection] =
     React.useState<?CoolOrNerdMode>();
   const selectCool = React.useCallback(() => {
     setCurrentSelection('cool');
   }, []);
   const selectNerd = React.useCallback(() => {
     setCurrentSelection('nerd');
   }, []);
 
   const { navigate } = props.navigation;
   const onSubmit = React.useCallback(() => {
     invariant(
       currentSelection,
       'Button should be disabled if currentSelection is not set',
     );
     navigate<'KeyserverSelection'>({
       name: KeyserverSelectionRouteName,
       params: { userSelections: { coolOrNerdMode: currentSelection } },
     });
   }, [navigate, currentSelection]);
 
   const buttonState = currentSelection ? 'enabled' : 'disabled';
   const styles = useStyles(unboundStyles);
   return (
     <View style={styles.container}>
       <RegistrationContainer>
         <Text style={styles.header}>To begin, choose your fighter</Text>
         <Text style={styles.body}>
           Do you want Comm to choose reasonable defaults for you, or do you want
           to see all the options and make the decisions yourself?
         </Text>
         <Text style={styles.body}>
           This setting will affect behavior throughout the app, but you can
           change it later in your settings.
         </Text>
         <RegistrationTile
           selected={currentSelection === 'nerd'}
           onSelect={selectNerd}
         >
           <RegistrationTileHeader>
             <Text style={styles.emojiIcon}>🤓</Text>
             <Text style={styles.tileTitleText}>Nerd mode</Text>
           </RegistrationTileHeader>
           <Text style={styles.tileBody}>
             We present more options and talk through their security and privacy
             implications in detail.
           </Text>
         </RegistrationTile>
         <RegistrationTile
           selected={currentSelection === 'cool'}
           onSelect={selectCool}
         >
           <RegistrationTileHeader>
             <Text style={styles.emojiIcon}>😎</Text>
             <Text style={styles.tileTitleText}>Cool mode</Text>
           </RegistrationTileHeader>
           <Text style={styles.tileBody}>
             We select reasonable defaults for you.
           </Text>
         </RegistrationTile>
       </RegistrationContainer>
-      <RegistrationButton onPress={onSubmit} label="Next" state={buttonState} />
+      <RegistrationButton
+        onPress={onSubmit}
+        label="Next"
+        variant={buttonState}
+      />
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     backgroundColor: 'panelBackground',
     justifyContent: 'space-between',
     flex: 1,
   },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
   },
   body: {
     fontSize: 15,
     lineHeight: 20,
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
   tileTitleText: {
     flex: 1,
     fontSize: 18,
     color: 'panelForegroundLabel',
   },
   tileBody: {
     fontSize: 13,
     color: 'panelForegroundSecondaryLabel',
   },
   emojiIcon: {
     fontSize: 32,
     bottom: 1,
     marginRight: 5,
   },
 };
 
 export default CoolOrNerdModeSelection;
diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
index 13ba16618..f0cfdb5ba 100644
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -1,153 +1,157 @@
 // @flow
 
 import * as React from 'react';
 import { Text, TextInput, View } from 'react-native';
 
 import RegistrationButton from './registration-button.react.js';
 import RegistrationContainer from './registration-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import {
   RegistrationTile,
   RegistrationTileHeader,
 } from './registration-tile.react.js';
 import type { CoolOrNerdMode } from './registration-types.js';
 import CommIcon from '../../components/comm-icon.react.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useStyles, useColors } from '../../themes/colors.js';
 
 type Selection = 'ashoat' | 'custom';
 
 export type KeyserverSelectionParams = {
   +userSelections: {
     +coolOrNerdMode: CoolOrNerdMode,
   },
 };
 
 type Props = {
   +navigation: RegistrationNavigationProp<'KeyserverSelection'>,
   +route: NavigationRoute<'KeyserverSelection'>,
 };
 // eslint-disable-next-line no-unused-vars
 function KeyserverSelection(props: Props): React.Node {
   const [customKeyserver, setCustomKeyserver] = React.useState('');
   const customKeyserverTextInputRef = React.useRef();
 
   const [currentSelection, setCurrentSelection] = React.useState<?Selection>();
   const selectAshoat = React.useCallback(() => {
     setCurrentSelection('ashoat');
     customKeyserverTextInputRef.current?.blur();
   }, []);
   const customKeyserverEmpty = !customKeyserver;
   const selectCustom = React.useCallback(() => {
     setCurrentSelection('custom');
     if (customKeyserverEmpty) {
       customKeyserverTextInputRef.current?.focus();
     }
   }, [customKeyserverEmpty]);
   const onCustomKeyserverFocus = React.useCallback(() => {
     setCurrentSelection('custom');
   }, []);
 
   let buttonState = 'disabled';
   if (
     currentSelection === 'ashoat' ||
     (currentSelection === 'custom' && customKeyserver)
   ) {
     buttonState = 'enabled';
   }
   const onSubmit = React.useCallback(() => {}, []);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   return (
     <View style={styles.container}>
       <RegistrationContainer>
         <Text style={styles.header}>Select a keyserver to join</Text>
         <Text style={styles.body}>
           Chat communities on Comm are hosted on keyservers, which are
           user-operated backends.
         </Text>
         <Text style={styles.body}>
           Keyservers allow Comm to offer strong privacy guarantees without
           sacrificing functionality.
         </Text>
         <RegistrationTile
           selected={currentSelection === 'ashoat'}
           onSelect={selectAshoat}
         >
           <RegistrationTileHeader>
             <CommIcon
               name="cloud-filled"
               size={16}
               color={colors.panelForegroundLabel}
               style={styles.cloud}
             />
             <Text style={styles.tileTitleText}>ashoat</Text>
           </RegistrationTileHeader>
           <Text style={styles.tileBody}>
             Ashoat is Comm’s founder, and his keyserver currently hosts most of
             the communities on Comm.
           </Text>
         </RegistrationTile>
         <RegistrationTile
           selected={currentSelection === 'custom'}
           onSelect={selectCustom}
         >
           <RegistrationTileHeader>
             <Text style={styles.tileTitleText}>Enter a keyserver</Text>
           </RegistrationTileHeader>
           <TextInput
             value={customKeyserver}
             onChangeText={setCustomKeyserver}
             style={styles.keyserverInput}
             placeholderTextColor={colors.panelSecondaryForegroundBorder}
             placeholder="Keyserver"
             onFocus={onCustomKeyserverFocus}
             ref={customKeyserverTextInputRef}
           />
         </RegistrationTile>
       </RegistrationContainer>
-      <RegistrationButton onPress={onSubmit} label="Next" state={buttonState} />
+      <RegistrationButton
+        onPress={onSubmit}
+        label="Next"
+        variant={buttonState}
+      />
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     backgroundColor: 'panelBackground',
     justifyContent: 'space-between',
     flex: 1,
   },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
   },
   body: {
     fontSize: 15,
     lineHeight: 20,
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
   tileTitleText: {
     flex: 1,
     fontSize: 18,
     color: 'panelForegroundLabel',
   },
   tileBody: {
     fontSize: 13,
     color: 'panelForegroundSecondaryLabel',
   },
   cloud: {
     marginRight: 8,
   },
   keyserverInput: {
     color: 'panelForegroundLabel',
     borderColor: 'panelSecondaryForegroundBorder',
     borderWidth: 1,
     borderRadius: 4,
     padding: 12,
   },
 };
 
 export default KeyserverSelection;
diff --git a/native/account/registration/registration-button.react.js b/native/account/registration/registration-button.react.js
index fe44581a4..b0981bc4e 100644
--- a/native/account/registration/registration-button.react.js
+++ b/native/account/registration/registration-button.react.js
@@ -1,64 +1,64 @@
 // @flow
 
 import * as React from 'react';
 import { Text } from 'react-native';
 
 import Button from '../../components/button.react.js';
 import { useStyles } from '../../themes/colors.js';
 
 type Props = {
   +onPress: () => mixed,
   +label: string,
-  +state?: 'enabled' | 'disabled' | 'loading',
+  +variant?: 'enabled' | 'disabled' | 'loading',
 };
 function RegistrationButton(props: Props): React.Node {
-  const { onPress, label, state } = props;
+  const { onPress, label, variant } = props;
 
   const styles = useStyles(unboundStyles);
   const buttonStyle = React.useMemo(() => {
-    if (state === 'disabled' || state === 'loading') {
+    if (variant === 'disabled' || variant === 'loading') {
       return [styles.button, styles.disabledButton];
     } else {
       return styles.button;
     }
-  }, [state, styles.button, styles.disabledButton]);
+  }, [variant, styles.button, styles.disabledButton]);
   const buttonTextStyle = React.useMemo(() => {
-    if (state === 'disabled') {
+    if (variant === 'disabled') {
       return [styles.buttonText, styles.disabledButtonText];
     }
     return styles.buttonText;
-  }, [state, styles.buttonText, styles.disabledButtonText]);
+  }, [variant, styles.buttonText, styles.disabledButtonText]);
 
   return (
     <Button
       onPress={onPress}
       iosActiveOpacity={0.6}
       style={buttonStyle}
-      disabled={state === 'disabled' || state === 'loading'}
+      disabled={variant === 'disabled' || variant === 'loading'}
     >
       <Text style={buttonTextStyle}>{label}</Text>
     </Button>
   );
 }
 
 const unboundStyles = {
   button: {
     backgroundColor: 'purpleButton',
     borderRadius: 8,
     margin: 16,
   },
   buttonText: {
     fontSize: 18,
     color: 'panelForegroundLabel',
     textAlign: 'center',
     padding: 12,
   },
   disabledButton: {
     backgroundColor: 'disabledButton',
   },
   disabledButtonText: {
     color: 'disabledButtonText',
   },
 };
 
 export default RegistrationButton;