diff --git a/native/bottom-sheets/user-profile-bottom-sheet.react.js b/native/bottom-sheets/user-profile-bottom-sheet.react.js new file mode 100644 --- /dev/null +++ b/native/bottom-sheets/user-profile-bottom-sheet.react.js @@ -0,0 +1,52 @@ +// @flow + +import * as React from 'react'; + +import type { AccountUserInfo } from 'lib/types/user-types.js'; + +import BottomSheet from './bottom-sheet.react.js'; +import UserProfile from '../components/user-profile.react.js'; +import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; +import type { NavigationRoute } from '../navigation/route-names.js'; + +export type UserProfileBottomSheetParams = { + +userInfo: AccountUserInfo, +}; + +type Props = { + +navigation: RootNavigationProp<'UserProfileBottomSheet'>, + +route: NavigationRoute<'UserProfileBottomSheet'>, +}; + +function UserProfileBottomSheet(props: Props): React.Node { + const { + navigation, + route: { + params: { userInfo }, + }, + } = props; + + const { goBackOnce } = navigation; + + const bottomSheetRef = React.useRef(); + + React.useEffect(() => { + if (!bottomSheetRef.current) { + return; + } + + bottomSheetRef.current.present(); + }, []); + + const onClosed = React.useCallback(() => { + goBackOnce(); + }, [goBackOnce]); + + return ( + + + + ); +} + +export default UserProfileBottomSheet; 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 @@ -45,10 +45,12 @@ CommunityCreationRouteName, RolesNavigatorRouteName, QRCodeSignInNavigatorRouteName, + UserProfileBottomSheetRouteName, } from './route-names.js'; import LoggedOutModal from '../account/logged-out-modal.react.js'; import RegistrationNavigator from '../account/registration/registration-navigator.react.js'; import TermsAndPrivacyModal from '../account/terms-and-privacy-modal.react.js'; +import UserProfileBottomSheet from '../bottom-sheets/user-profile-bottom-sheet.react.js'; import ThreadPickerModal from '../calendar/thread-picker-modal.react.js'; import ImagePasteModal from '../chat/image-paste-modal.react.js'; import MessageReactionsModal from '../chat/message-reactions-modal.react.js'; @@ -278,6 +280,10 @@ options={modalOverlayScreenOptions} /> + ); } 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 @@ -13,6 +13,7 @@ import type { RegistrationTermsParams } from '../account/registration/registration-terms.react.js'; import type { UsernameSelectionParams } from '../account/registration/username-selection.react.js'; import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js'; +import type { UserProfileBottomSheetParams } from '../bottom-sheets/user-profile-bottom-sheet.react.js'; import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js'; import type { ComposeSubchannelParams } from '../chat/compose-subchannel.react.js'; import type { FullScreenThreadMediaGalleryParams } from '../chat/fullscreen-thread-media-gallery.react.js'; @@ -133,6 +134,7 @@ export const CreateRolesScreenRouteName = 'CreateRolesScreen'; export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator'; export const QRCodeScreenRouteName = 'QRCodeScreen'; +export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; export type RootParamList = { +LoggedOutModal: void, @@ -153,6 +155,7 @@ +InviteLinkNavigator: void, +RolesNavigator: void, +QRCodeSignInNavigator: void, + +UserProfileBottomSheet: UserProfileBottomSheetParams, }; export type MessageTooltipRouteNames = @@ -261,6 +264,10 @@ +QRCodeScreen: void, }; +export type BottomSheetParamList = { + +UserProfileBottomSheet: UserProfileBottomSheetParams, +}; + export type ScreenParamList = { ...RootParamList, ...OverlayParamList, @@ -274,6 +281,7 @@ ...CommunityCreationParamList, ...RolesParamList, ...QRCodeSignInParamList, + ...BottomSheetParamList, }; export type NavigationRoute> =