[native] introduce barebones keyserver selection list screen

Summary:
This diff introduces the barebones keyserver selection list screen and all the navigation logic to navigate from the profile screen to this new screen

Linear Task: https://linear.app/comm/issue/ENG-4911/introduce-keyserver-selection-screen-into-our-profile-app-navigation

Depends on D9565

Test Plan:
Please see the demo video below

{F834123}

Reviewers: rohan, inka, michal

Reviewed By: rohan

Subscribers: ashoat, tomek, wyilio

Differential Revision: https://phab.comm.dev/D9566

native/navigation/route-names.js

@@ -139,6 +139,7 @@ export const UserProfileBottomSheetNavigatorRouteName =
   'UserProfileBottomSheetNavigator';
 export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet';
 export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal';
+export const KeyserverSelectionListRouteName = 'KeyserverSelectionList';
 
 export type RootParamList = {
   +LoggedOutModal: void,
@@ -232,6 +233,7 @@ export type ProfileParamList = {
   +LinkedDevices: void,
   +SecondaryDeviceQRCodeScanner: void,
   +BackupMenu: void,
+  +KeyserverSelectionList: void,
 };
 
 export type CommunityDrawerParamList = { +TabNavigator: void };

native/profile/keyserver-selection-list.react.js

@@ -0,0 +1,10 @@
+// @flow
+
+import * as React from 'react';
+
+// eslint-disable-next-line no-unused-vars
+function KeyserverSelectionList(props: { ... }): React.Node {
+  return null;
+}
+
+export default KeyserverSelectionList;

native/profile/profile-screen.react.js

@@ -37,6 +37,7 @@ import {
   DefaultNotificationsPreferencesRouteName,
   LinkedDevicesRouteName,
   BackupMenuRouteName,
+  KeyserverSelectionListRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
@@ -324,7 +325,7 @@ class ProfileScreen extends React.PureComponent<Props> {
   };
 
   onPressKeyserverSelection = () => {
-    // TODO
+    this.navigateIfActive(KeyserverSelectionListRouteName);
   };
 }
 

native/profile/profile.react.js

@@ -17,6 +17,7 @@ import DeleteAccount from './delete-account.react.js';
 import DevTools from './dev-tools.react.js';
 import EditPassword from './edit-password.react.js';
 import EmojiUserAvatarCreation from './emoji-user-avatar-creation.react.js';
+import KeyserverSelectionList from './keyserver-selection-list.react.js';
 import LinkedDevicesHeaderRightButton from './linked-devices-header-right-button.react.js';
 import LinkedDevices from './linked-devices.react.js';
 import PrivacyPreferences from './privacy-preferences.react.js';
@@ -43,6 +44,7 @@ import {
   LinkedDevicesRouteName,
   SecondaryDeviceQRCodeScannerRouteName,
   BackupMenuRouteName,
+  KeyserverSelectionListRouteName,
   type ScreenParamList,
   type ProfileParamList,
 } from '../navigation/route-names.js';
@@ -61,6 +63,7 @@ const linkedDevicesOptions = {
   // eslint-disable-next-line react/display-name
   headerRight: () => <LinkedDevicesHeaderRightButton />,
 };
+const keyserverSelectionListOptions = { headerTitle: 'Keyserver selection' };
 const backupMenuOptions = { headerTitle: 'Backup menu' };
 const secondaryDeviceQRCodeScannerOptions = {
   headerTitle: '',
@@ -151,6 +154,11 @@ function ProfileComponent(props: Props): React.Node {
             component={LinkedDevices}
             options={linkedDevicesOptions}
           />
+          <Profile.Screen
+            name={KeyserverSelectionListRouteName}
+            component={KeyserverSelectionList}
+            options={keyserverSelectionListOptions}
+          />
           <Profile.Screen
             name={BackupMenuRouteName}
             component={BackupMenu}