diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
index 89f550330..a463ba658 100644
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -1,128 +1,132 @@
 // @flow
 
 import * as React from 'react';
 import { Text, TextInput } 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 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';
 
 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');
   }, []);
 
+  const onSubmit = React.useCallback(() => {}, []);
+
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   return (
     <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>
+      <RegistrationButton onPress={onSubmit} label="Next" />
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   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
new file mode 100644
index 000000000..770458c8f
--- /dev/null
+++ b/native/account/registration/registration-button.react.js
@@ -0,0 +1,36 @@
+// @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,
+};
+function RegistrationButton(props: Props): React.Node {
+  const { onPress, label } = props;
+  const styles = useStyles(unboundStyles);
+  return (
+    <Button onPress={onPress} iosActiveOpacity={0.6} style={styles.button}>
+      <Text style={styles.buttonText}>{label}</Text>
+    </Button>
+  );
+}
+
+const unboundStyles = {
+  button: {
+    backgroundColor: 'purpleButton',
+    borderRadius: 8,
+  },
+  buttonText: {
+    fontSize: 18,
+    color: 'panelForegroundLabel',
+    textAlign: 'center',
+    padding: 12,
+  },
+};
+
+export default RegistrationButton;
diff --git a/native/components/button.react.js b/native/components/button.react.js
index 0ec8ad14a..c89226de5 100644
--- a/native/components/button.react.js
+++ b/native/components/button.react.js
@@ -1,107 +1,107 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Platform,
   View,
   TouchableNativeFeedback,
   TouchableHighlight,
   TouchableOpacity,
 } from 'react-native';
 
 import type { ViewStyle } from '../types/styles.js';
 
 const ANDROID_VERSION_LOLLIPOP = 21;
 
 type DefaultProps = {
   +androidBorderlessRipple: boolean,
   +iosFormat: 'highlight' | 'opacity',
   +iosActiveOpacity: number,
   +androidFormat: 'ripple' | 'highlight' | 'opacity',
 };
 type Props = {
   ...DefaultProps,
-  +onPress: () => *,
+  +onPress: () => mixed,
   +disabled?: boolean,
   +style?: ViewStyle,
   // style and topStyle just get merged in most cases. The separation only
   // matters in the case of iOS and iosFormat = "highlight", where the
   // topStyle is necessary for layout, and the bottom style is necessary for
   // colors etc.
   +topStyle?: ViewStyle,
   +children?: React.Node,
   +iosHighlightUnderlayColor?: string,
 };
 class Button extends React.PureComponent<Props> {
   static defaultProps: DefaultProps = {
     androidBorderlessRipple: false,
     iosFormat: 'opacity',
     androidFormat: 'ripple',
     iosActiveOpacity: 0.2,
   };
 
   render(): React.Node {
     if (
       Platform.OS === 'android' &&
       this.props.androidFormat === 'ripple' &&
       Platform.Version >= ANDROID_VERSION_LOLLIPOP
     ) {
       return (
         <TouchableNativeFeedback
           onPress={this.props.onPress}
           disabled={!!this.props.disabled}
           background={TouchableNativeFeedback.Ripple(
             'rgba(0, 0, 0, .32)',
             this.props.androidBorderlessRipple,
           )}
         >
           <View style={[this.props.topStyle, this.props.style]}>
             {this.props.children}
           </View>
         </TouchableNativeFeedback>
       );
     }
     let format = 'opacity';
     if (Platform.OS === 'ios') {
       format = this.props.iosFormat;
     } else if (
       Platform.OS === 'android' &&
       this.props.androidFormat !== 'ripple'
     ) {
       format = this.props.androidFormat;
     }
     if (format === 'highlight') {
       const underlayColor = this.props.iosHighlightUnderlayColor;
       invariant(
         underlayColor,
         'iosHighlightUnderlayColor should be specified to Button in ' +
           "format='highlight'",
       );
       return (
         <TouchableHighlight
           onPress={this.props.onPress}
           style={this.props.topStyle}
           underlayColor={underlayColor}
           activeOpacity={this.props.iosActiveOpacity}
           disabled={!!this.props.disabled}
         >
           <View style={this.props.style}>{this.props.children}</View>
         </TouchableHighlight>
       );
     } else {
       return (
         <TouchableOpacity
           onPress={this.props.onPress}
           style={[this.props.topStyle, this.props.style]}
           activeOpacity={this.props.iosActiveOpacity}
           disabled={!!this.props.disabled}
         >
           {this.props.children}
         </TouchableOpacity>
       );
     }
   }
 }
 
 export default Button;