diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js --- a/native/navigation/root-navigator.react.js +++ b/native/navigation/root-navigator.react.js @@ -56,6 +56,7 @@ TagFarcasterChannelNavigatorRouteName, CreateMissingSIWEBackupMessageRouteName, RestoreSIWEBackupRouteName, + LinkedDevicesBottomSheetRouteName, } from './route-names.js'; import LoggedOutModal from '../account/logged-out-modal.react.js'; import CreateMissingSIWEBackupMessage from '../account/registration/missing-registration-data/missing-siwe-backup-message.react.js'; @@ -76,6 +77,7 @@ import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js'; import CustomServerModal from '../profile/custom-server-modal.react.js'; import KeyserverSelectionBottomSheet from '../profile/keyserver-selection-bottom-sheet.react.js'; +import LinkedDevicesBottomSheet from '../profile/linked-devices-bottom-sheet.react.js'; import QRCodeSignInNavigator from '../qr-code/qr-code-sign-in-navigator.react.js'; import RolesNavigator from '../roles/roles-navigator.react.js'; import UserProfileBottomSheetNavigator from '../user-profile/user-profile-bottom-sheet-navigator.react.js'; @@ -292,6 +294,11 @@ component={KeyserverSelectionBottomSheet} options={modalOverlayScreenOptions} /> + , + +route: NavigationRoute<'LinkedDevicesBottomSheet'>, +}; + +function LinkedDevicesBottomSheet(props: Props): React.Node { + const { navigation } = props; + + const { goBack } = navigation; + + const bottomSheetRef = React.useRef(); + + const styles = useStyles(unboundStyles); + + return ( + + + + ); +} + +const unboundStyles = { + container: { + paddingHorizontal: 16, + }, +}; + +export default LinkedDevicesBottomSheet; diff --git a/native/profile/linked-devices-list-item.react.js b/native/profile/linked-devices-list-item.react.js --- a/native/profile/linked-devices-list-item.react.js +++ b/native/profile/linked-devices-list-item.react.js @@ -1,5 +1,6 @@ // @flow +import { useNavigation } from '@react-navigation/native'; import * as React from 'react'; import { View, TouchableOpacity } from 'react-native'; @@ -10,6 +11,7 @@ import Pill from '../components/pill.react.js'; import SWMIcon from '../components/swmansion-icon.react.js'; +import { LinkedDevicesBottomSheetRouteName } from '../navigation/route-names.js'; import { useStyles, useColors } from '../themes/colors.js'; type Props = { @@ -25,6 +27,14 @@ const styles = useStyles(unboundStyles); const colors = useColors(); + const { navigate } = useNavigation(); + + const onPress = React.useCallback(() => { + navigate<'LinkedDevicesBottomSheet'>({ + name: LinkedDevicesBottomSheetRouteName, + }); + }, [navigate]); + const deviceType = platformDetails?.deviceType; const deviceIcon = React.useMemo(() => { @@ -63,7 +73,7 @@ const deviceListItem = React.useMemo( () => ( - +