diff --git a/native/bottom-sheet/bottom-sheet.react.js b/native/bottom-sheet/bottom-sheet.react.js --- a/native/bottom-sheet/bottom-sheet.react.js +++ b/native/bottom-sheet/bottom-sheet.react.js @@ -1,10 +1,12 @@ // @flow import { BottomSheetModal } from '@gorhom/bottom-sheet'; +import invariant from 'invariant'; import * as React from 'react'; import BottomSheetBackdrop from './bottom-sheet-backdrop.react.js'; import BottomSheetHandle from './bottom-sheet-handle.react.js'; +import { BottomSheetContext } from './bottom-sheet-provider.react.js'; import { useStyles } from '../themes/colors.js'; type Props = { @@ -20,7 +22,12 @@ const styles = useStyles(unboundStyles); - const snapPoints = React.useMemo(() => ['25%', '50%'], []); + const bottomSheetContext = React.useContext(BottomSheetContext); + invariant(bottomSheetContext, 'bottomSheetContext should be set'); + + const { contentHeight } = bottomSheetContext; + + const snapPoints = React.useMemo(() => [contentHeight], [contentHeight]); return ( , }; function UserProfileRelationshipButton(props: Props): React.Node { - const { threadInfo, pendingPersonalThreadUserInfo } = props; + const { + threadInfo, + pendingPersonalThreadUserInfo, + setUserProfileRelationshipButtonHeight, + } = props; const { otherUserInfo, @@ -33,6 +39,28 @@ pendingPersonalThreadUserInfo, ); + React.useLayoutEffect(() => { + if (otherUserInfo?.relationshipStatus === userRelationshipStatus.FRIEND) { + setUserProfileRelationshipButtonHeight(0); + } else if ( + otherUserInfo?.relationshipStatus === + userRelationshipStatus.REQUEST_RECEIVED + ) { + const incomingFriendRequestButtonsContainerHeight = 88; + + setUserProfileRelationshipButtonHeight( + incomingFriendRequestButtonsContainerHeight, + ); + } else { + const relationshipButtonHeight = 54; + + setUserProfileRelationshipButtonHeight(relationshipButtonHeight); + } + }, [ + otherUserInfo?.relationshipStatus, + setUserProfileRelationshipButtonHeight, + ]); + const styles = useStyles(unboundStyles); const userProfileRelationshipButton = React.useMemo(() => { diff --git a/native/user-profile/user-profile.react.js b/native/user-profile/user-profile.react.js --- a/native/user-profile/user-profile.react.js +++ b/native/user-profile/user-profile.react.js @@ -1,8 +1,10 @@ // @flow import Clipboard from '@react-native-clipboard/clipboard'; +import invariant from 'invariant'; import * as React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { relationshipBlockedInEitherDirection } from 'lib/shared/relationship-utils.js'; import { useUserProfileThreadInfo } from 'lib/shared/thread-utils.js'; @@ -13,6 +15,7 @@ import UserProfileMessageButton from './user-profile-message-button.react.js'; import UserProfileRelationshipButton from './user-profile-relationship-button.react.js'; import UserAvatar from '../avatars/user-avatar.react.js'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js'; import SingleLine from '../components/single-line.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import { useStyles } from '../themes/colors.js'; @@ -30,6 +33,46 @@ const [usernameCopied, setUsernameCopied] = React.useState(false); + const [ + userProfileRelationshipButtonHeight, + setUserProfileRelationshipButtonHeight, + ] = React.useState(0); + + const bottomSheetContext = React.useContext(BottomSheetContext); + invariant(bottomSheetContext, 'bottomSheetContext should be set'); + + const { setContentHeight } = bottomSheetContext; + + const insets = useSafeAreaInsets(); + + React.useLayoutEffect(() => { + const userInfoContainerHeight = 90; + const bottomPadding = 40; + + let height = insets.bottom + userInfoContainerHeight + bottomPadding; + + if (userProfileThreadInfo) { + const menuButtonHeight = 24; + height += menuButtonHeight; + } + + if ( + userProfileThreadInfo && + !relationshipBlockedInEitherDirection(userInfo?.relationshipStatus) + ) { + const messageButtonHeight = 54; + height += messageButtonHeight + userProfileRelationshipButtonHeight; + } + + setContentHeight(height); + }, [ + insets.bottom, + setContentHeight, + userInfo?.relationshipStatus, + userProfileRelationshipButtonHeight, + userProfileThreadInfo, + ]); + const styles = useStyles(unboundStyles); const onPressCopyUsername = React.useCallback(async () => { @@ -100,6 +143,9 @@ ); }, [userInfo?.relationshipStatus, userProfileThreadInfo]);