[native] make bottomsheet snap point dynamic

Summary:
This diff replaces the hardcoded snap point I set earlier with a snap point that is based off the height of the bottomsheet container. With this new dynamic snap point, the bottom sheet will always update and change it's snap point whenever the height of the container changes (for example when we add or remove a button on the user profile component)

Depends on D9273

Test Plan:
Please see the demo videos below

{F772686}

Reviewers: atul, inka

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D9274

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 @@ function ForwardedBottomSheet(
 
   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 (
     <BottomSheetModal

native/user-profile/user-profile-relationship-button.react.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { View, Text } from 'react-native';
 
 import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js';
+import type { SetState } from 'lib/types/hook-types.js';
 import { userRelationshipStatus } from 'lib/types/relationship-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import type { UserInfo } from 'lib/types/user-types';
@@ -19,10 +20,15 @@ const onErrorCallback = () => {
 type Props = {
   +threadInfo: ThreadInfo,
   +pendingPersonalThreadUserInfo?: UserInfo,
+  +setUserProfileRelationshipButtonHeight: SetState<number>,
 };
 
 function UserProfileRelationshipButton(props: Props): React.Node {
-  const { threadInfo, pendingPersonalThreadUserInfo } = props;
+  const {
+    threadInfo,
+    pendingPersonalThreadUserInfo,
+    setUserProfileRelationshipButtonHeight,
+  } = props;
 
   const {
     otherUserInfo,
@@ -33,6 +39,28 @@ function UserProfileRelationshipButton(props: Props): React.Node {
     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(() => {

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 sleep from 'lib/utils/sleep.js';
 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 @@ function UserProfile(props: Props): React.Node {
 
   const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
 
+  const [
+    userProfileRelationshipButtonHeight,
+    setUserProfileRelationshipButtonHeight,
+  ] = React.useState<number>(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 @@ function UserProfile(props: Props): React.Node {
       <UserProfileRelationshipButton
         threadInfo={threadInfo}
         pendingPersonalThreadUserInfo={pendingPersonalThreadUserInfo}
+        setUserProfileRelationshipButtonHeight={
+          setUserProfileRelationshipButtonHeight
+        }
       />
     );
   }, [userInfo?.relationshipStatus, userProfileThreadInfo]);