diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js --- a/native/components/full-screen-view-modal.react.js +++ b/native/components/full-screen-view-modal.react.js @@ -35,6 +35,7 @@ derivedDimensionsInfoSelector, } from '../selectors/dimensions-selectors.js'; import type { NativeMethods } from '../types/react-native.js'; +import type { UserProfileBottomSheetNavigationProp } from '../user-profile/user-profile-bottom-sheet-navigator.react.js'; import { clamp, gestureJustStarted, @@ -138,8 +139,12 @@ >; type BaseProps = { - +navigation: AppNavigationProp<'ImageModal'>, - +route: NavigationRoute<'ImageModal'>, + +navigation: + | AppNavigationProp<'ImageModal'> + | UserProfileBottomSheetNavigationProp<'UserProfileAvatarModal'>, + +route: + | NavigationRoute<'ImageModal'> + | NavigationRoute<'UserProfileAvatarModal'>, +children: React.Node, +contentDimensions: Dimensions, +saveContentCallback?: () => Promise, diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -46,6 +46,7 @@ import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js'; import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js'; import type { MessageSearchParams } from '../search/message-search.react.js'; +import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js'; import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js'; export const ActionResultModalRouteName = 'ActionResultModal'; @@ -137,6 +138,7 @@ export const UserProfileBottomSheetNavigatorRouteName = 'UserProfileBottomSheetNavigator'; export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; +export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal'; export type RootParamList = { +LoggedOutModal: void, @@ -268,6 +270,7 @@ export type UserProfileBottomSheetParamList = { +UserProfileBottomSheet: UserProfileBottomSheetParams, + +UserProfileAvatarModal: UserProfileAvatarModalParams, }; export type ScreenParamList = { diff --git a/native/user-profile/user-profile-avatar-modal.react.js b/native/user-profile/user-profile-avatar-modal.react.js new file mode 100644 --- /dev/null +++ b/native/user-profile/user-profile-avatar-modal.react.js @@ -0,0 +1,49 @@ +// @flow + +import * as React from 'react'; + +import type { Dimensions } from 'lib/types/media-types.js'; + +import type { UserProfileBottomSheetNavigationProp } from './user-profile-bottom-sheet-navigator.react.js'; +import UserAvatar from '../avatars/user-avatar.react.js'; +import FullScreenViewModal from '../components/full-screen-view-modal.react.js'; +import type { NavigationRoute } from '../navigation/route-names.js'; +import { + type VerticalBounds, + type LayoutCoordinates, +} from '../types/layout-types.js'; + +const avatarDimensions: Dimensions = { + width: 224, + height: 224, +}; + +export type UserProfileAvatarModalParams = { + +presentedFrom: string, + +initialCoordinates: LayoutCoordinates, + +verticalBounds: VerticalBounds, + +userID: ?string, +}; + +type Props = { + +navigation: UserProfileBottomSheetNavigationProp<'UserProfileAvatarModal'>, + +route: NavigationRoute<'UserProfileAvatarModal'>, +}; + +function UserProfileAvatarModal(props: Props): React.Node { + const { navigation, route } = props; + + const { userID } = route.params; + + return ( + + + + ); +} + +export default UserProfileAvatarModal; diff --git a/native/user-profile/user-profile-bottom-sheet-navigator.react.js b/native/user-profile/user-profile-bottom-sheet-navigator.react.js --- a/native/user-profile/user-profile-bottom-sheet-navigator.react.js +++ b/native/user-profile/user-profile-bottom-sheet-navigator.react.js @@ -2,6 +2,7 @@ import * as React from 'react'; +import UserProfileAvatarModal from './user-profile-avatar-modal.react.js'; import UserProfileBottomSheet from './user-profile-bottom-sheet.react.js'; import { createOverlayNavigator } from '../navigation/overlay-navigator.react.js'; import type { @@ -11,6 +12,7 @@ import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { UserProfileBottomSheetRouteName, + UserProfileAvatarModalRouteName, type ScreenParamList, type UserProfileBottomSheetParamList, } from '../navigation/route-names.js'; @@ -38,6 +40,10 @@ name={UserProfileBottomSheetRouteName} component={UserProfileBottomSheet} /> + ); }