diff --git a/native/profile/add-keyserver.react.js b/native/profile/add-keyserver.react.js
index c23f52f46..3c73bde9f 100644
--- a/native/profile/add-keyserver.react.js
+++ b/native/profile/add-keyserver.react.js
@@ -1,10 +1,88 @@
// @flow
+import { useNavigation } from '@react-navigation/native';
import * as React from 'react';
+import { View, Text } from 'react-native';
+
+import TextInput from '../components/text-input.react.js';
+import HeaderRightTextButton from '../navigation/header-right-text-button.react.js';
+import { useStyles, useColors } from '../themes/colors.js';
// eslint-disable-next-line no-unused-vars
function AddKeyserver(props: { ... }): React.Node {
- return null;
+ const { setOptions } = useNavigation();
+
+ const { panelForegroundTertiaryLabel } = useColors();
+ const styles = useStyles(unboundStyles);
+
+ const [urlInput, setUrlInput] = React.useState('');
+
+ const onPressSave = React.useCallback(() => {
+ // TODO
+ }, []);
+
+ React.useEffect(() => {
+ setOptions({
+ // eslint-disable-next-line react/display-name
+ headerRight: () => (
+
+ ),
+ });
+ }, [onPressSave, setOptions, styles.header]);
+
+ const onChangeText = React.useCallback(
+ (text: string) => setUrlInput(text),
+ [],
+ );
+
+ return (
+
+ KEYSERVER URL
+
+
+
+
+ );
}
+const unboundStyles = {
+ container: {
+ paddingTop: 8,
+ },
+ header: {
+ color: 'panelBackgroundLabel',
+ fontSize: 12,
+ fontWeight: '400',
+ paddingBottom: 3,
+ paddingHorizontal: 24,
+ },
+ inputContainer: {
+ backgroundColor: 'panelForeground',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ paddingHorizontal: 24,
+ paddingVertical: 12,
+ borderBottomWidth: 1,
+ borderColor: 'panelForegroundBorder',
+ borderTopWidth: 1,
+ },
+ input: {
+ color: 'panelForegroundLabel',
+ flex: 1,
+ fontFamily: 'Arial',
+ fontSize: 16,
+ paddingVertical: 0,
+ borderBottomColor: 'transparent',
+ },
+};
+
export default AddKeyserver;