diff --git a/native/profile/keyserver-selection-list-item.react.js b/native/profile/keyserver-selection-list-item.react.js --- a/native/profile/keyserver-selection-list-item.react.js +++ b/native/profile/keyserver-selection-list-item.react.js @@ -1,13 +1,15 @@ // @flow +import { useNavigation } from '@react-navigation/native'; import * as React from 'react'; -import { View } from 'react-native'; +import { TouchableOpacity } from 'react-native'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; import CommIcon from '../components/comm-icon.react.js'; import Pill from '../components/pill.react.js'; import StatusIndicator from '../components/status-indicator.react.js'; +import { KeyserverSelectionBottomSheetRouteName } from '../navigation/route-names.js'; import { useStyles, useColors } from '../themes/colors.js'; type Props = { @@ -21,6 +23,18 @@ const styles = useStyles(unboundStyles); const colors = useColors(); + const { navigate } = useNavigation(); + + const onPress = React.useCallback(() => { + navigate<'KeyserverSelectionBottomSheet'>({ + name: KeyserverSelectionBottomSheetRouteName, + params: { + keyserverAdminUsername, + keyserverInfo, + }, + }); + }, [keyserverAdminUsername, keyserverInfo, navigate]); + const cloudIcon = React.useMemo( () => ( ( - + - + ), [ cloudIcon, colors.codeBackground, keyserverAdminUsername, keyserverInfo.connection, + onPress, styles.keyserverListItemContainer, ], );