[Fix][BottomSheetModal] experimentally modified BottomSheetModal to d…

…ynamically adjust its height based on its content (#269) * fix: FeedVerticalDots 의 바텀시트 높이 설정을 실험적으로 동적으로 바꿔봄 * fix: CommentVerticalDots와 Mypage 에도 같은 로직 적용 * chore: unused Feather 지우고 로직 간소화 * fix: 복수의 컴포넌트 렌더링이 발생하면 onLayout이 과다하게 실행되어 height를 고정해줘야함 * fix: escaping sonacloud block temporarily * chore: again * chore: again
CCC-org · Jan 7, 2024 · c4daed3 · c4daed3
1 parent 957adc6
commit c4daed3
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 78 deletions.
diff --git a/src/components/bottomsheet/SheetPostOptions.tsx b/src/components/bottomsheet/SheetPostOptions.tsx
@@ -123,7 +123,7 @@ const SheetPostOptions = ({
 
   if (isReport) {
     return (
-      <ScrollView style={styles.optionContainer}>
+      <ScrollView style={styles.reportOptionsContainer}>
         <Text style={styles.header}>무엇이 문제인지 알려주세요</Text>
         {reportOptions.map((option) => (
           <Pressable
@@ -147,7 +147,7 @@ const SheetPostOptions = ({
             <Text>기타 신고 사유</Text>
           </Text>
         </Pressable>
-        <Pressable onPress={handleReportSubmit} style={{ marginTop: 72 }}>
+        <Pressable onPress={handleReportSubmit}>
           <ConditionalButton
             isActive={selectedReport !== null}
             width={screenWidth - 32}
@@ -209,21 +209,21 @@ const SheetPostOptions = ({
 export default SheetPostOptions;
 function createStyles(fonts: ReactNativePaper.ThemeFonts) {
   const styles = StyleSheet.create({
-    contentContainer: {
-      width: '100%',
-      height: '80%',
-      flexDirection: 'column',
-      justifyContent: 'flex-start',
-    },
     optionContainer: {
       backgroundColor: 'white',
       padding: 16,
     },
+    reportOptionsContainer: {
+      height: 470,
+      backgroundColor: 'white',
+      padding: 16,
+    },
     option: {
       paddingVertical: 18,
     },
     clickableOption: {
       paddingVertical: 18,
+      marginBottom: 30,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',

diff --git a/src/components/comments/CommentVerticalDots.tsx b/src/components/comments/CommentVerticalDots.tsx
@@ -1,5 +1,5 @@
-import { Pressable, StyleSheet } from 'react-native';
-import React, { useCallback, useRef } from 'react';
+import { Pressable, View } from 'react-native';
+import React, { useCallback, useRef, useState } from 'react';
 import { Feather } from '@expo/vector-icons';
 import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { useGetUserId } from '../../utils/hooks/useGetUserId';
@@ -17,6 +17,13 @@ const CommentVerticalDots = ({ userId, userName, commentId }: FeedVerticalDotsPr
   const isMyComment = myUserId === userId;
   const modalRef = useRef<BottomSheetModal>(null);
 
+  const [contentHeight, setContentHeight] = useState<number>(300);
+
+  const handleLayout = (event) => {
+    const height = event.nativeEvent.layout.height;
+    setContentHeight(height + 50);
+  };
+
   const renderBackdrop = useCallback(
     (props) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />,
     [],
@@ -38,24 +45,24 @@ const CommentVerticalDots = ({ userId, userName, commentId }: FeedVerticalDotsPr
       </Pressable>
       <BottomSheetModal
         ref={modalRef}
-        snapPoints={isMyComment ? ['19%', '30%'] : ['25%', '64%', '90%']}
+        snapPoints={[contentHeight, contentHeight, contentHeight]}
         backdropComponent={renderBackdrop}
       >
-        {isMyComment ? (
-          <SheetMyComment modalRef={modalRef} commentId={commentId} />
-        ) : (
-          <SheetOthersComment
-            modalRef={modalRef}
-            userName={userName}
-            userId={userId}
-            commentId={commentId}
-          />
-        )}
+        <View onLayout={handleLayout}>
+          {isMyComment ? (
+            <SheetMyComment modalRef={modalRef} commentId={commentId} />
+          ) : (
+            <SheetOthersComment
+              modalRef={modalRef}
+              userName={userName}
+              userId={userId}
+              commentId={commentId}
+            />
+          )}
+        </View>
       </BottomSheetModal>
     </>
   );
 };
 
 export default CommentVerticalDots;
-
-const styles = StyleSheet.create({});
diff --git a/src/components/comments/SheetOthersComment.tsx b/src/components/comments/SheetOthersComment.tsx
@@ -125,7 +125,7 @@ const SheetOthersComment = ({ modalRef, userId, userName, commentId }: BSPostOpt
 
   if (isReport) {
     return (
-      <ScrollView style={styles.optionContainer}>
+      <ScrollView style={styles.reportOptionContainer}>
         <Text style={styles.header}>무엇이 문제인지 알려주세요</Text>
         {reportOptions.map((option) => (
           <Pressable
@@ -191,14 +191,19 @@ function createStyles(fonts: ReactNativePaper.ThemeFonts) {
   const styles = StyleSheet.create({
     contentContainer: {
       width: '100%',
-      height: '80%',
+      height: 732,
       flexDirection: 'column',
       justifyContent: 'flex-start',
     },
     optionContainer: {
       backgroundColor: 'white',
       padding: 16,
     },
+    reportOptionContainer: {
+      padding: 16,
+      backgroundColor: 'white',
+      height: 470,
+    },
     option: {
       paddingVertical: 18,
     },

diff --git a/src/screens/Feed/FeedVerticalDots.tsx b/src/screens/Feed/FeedVerticalDots.tsx
@@ -1,5 +1,5 @@
-import { Pressable, StyleSheet } from 'react-native';
-import React, { useCallback, useRef } from 'react';
+import { Pressable, View } from 'react-native';
+import React, { useCallback, useRef, useState } from 'react';
 import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { useGetUserId } from '../../utils/hooks/useGetUserId';
 import SheetMyPostOptions from '../../components/bottomsheet/SheetMyPostOptions';
@@ -35,6 +35,13 @@ const FeedVerticalDots = ({
   const isMyPost = myUserId === userId;
   const modalRef = useRef<BottomSheetModal>(null);
 
+  const [contentHeight, setContentHeight] = useState<number>(300);
+
+  const handleLayout = (event) => {
+    const height = event.nativeEvent.layout.height;
+    setContentHeight(height + 50);
+  };
+
   const renderBackdrop = useCallback(
     (props) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />,
     [],
@@ -50,39 +57,39 @@ const FeedVerticalDots = ({
       </Pressable>
       <BottomSheetModal
         ref={modalRef}
-        snapPoints={isMyPost ? ['25%', '63%'] : ['33%', '65%', '90%']}
+        snapPoints={[contentHeight, contentHeight, contentHeight]}
         backdropComponent={renderBackdrop}
       >
-        {isMyPost ? (
-          <SheetMyPostOptions
-            modalRef={modalRef}
-            userName={userName}
-            userId={userId}
-            insightId={insightId}
-            nickname={nickname}
-            title={title}
-            image={image}
-            contents={contents}
-            link={link}
-            feedListQueryClient={feedListQueryClient}
-          />
-        ) : (
-          <SheetPostOptions
-            modalRef={modalRef}
-            userName={userName}
-            userId={userId}
-            insightId={insightId}
-            nickname={nickname}
-            title={title}
-            image={image}
-            contents={contents}
-          />
-        )}
+        <View onLayout={handleLayout}>
+          {isMyPost ? (
+            <SheetMyPostOptions
+              modalRef={modalRef}
+              userName={userName}
+              userId={userId}
+              insightId={insightId}
+              nickname={nickname}
+              title={title}
+              image={image}
+              contents={contents}
+              link={link}
+              feedListQueryClient={feedListQueryClient}
+            />
+          ) : (
+            <SheetPostOptions
+              modalRef={modalRef}
+              userName={userName}
+              userId={userId}
+              insightId={insightId}
+              nickname={nickname}
+              title={title}
+              image={image}
+              contents={contents}
+            />
+          )}
+        </View>
       </BottomSheetModal>
     </>
   );
 };
 
 export default FeedVerticalDots;
-
-const styles = StyleSheet.create({});
diff --git a/src/screens/Main/mypage/MyPageScreen.tsx b/src/screens/Main/mypage/MyPageScreen.tsx
@@ -31,6 +31,12 @@ const MyPageScreen = ({ navigation, route }) => {
   const [selectedCategory, setSelectedCategory] = useState<Record<string, string>[]>([]);
   const [representativeTitleList, setRepresentativeTitleList] = useState<AchievedTitle[]>([]);
   const [titleTotal, setTitleTotal] = useState<number>(0);
+  const [bottomSheetContentHeight, setBottomSheetContentHeight] = useState<number>(300);
+
+  const handleLayout = (event) => {
+    const height = event.nativeEvent.layout.height;
+    setBottomSheetContentHeight(height + 50);
+  };
 
   const [iconColor, setIconColor] = useState([
     [theme.colors.graphic.purple, `${theme.colors.graphic.purple}1a`],
@@ -275,15 +281,17 @@ const MyPageScreen = ({ navigation, route }) => {
         />
         <BottomSheetModal
           ref={modalRef}
-          snapPoints={['20%', '25%']}
+          snapPoints={[bottomSheetContentHeight, bottomSheetContentHeight]}
           backdropComponent={renderBackdrop}
         >
-          <ProfileOptions
-            modalRef={modalRef}
-            userId={userId}
-            userName={profile?.data?.nickname ?? ''}
-            isSelf={true}
-          />
+          <View onLayout={handleLayout}>
+            <ProfileOptions
+              modalRef={modalRef}
+              userId={userId}
+              userName={profile?.data?.nickname ?? ''}
+              isSelf={true}
+            />
+          </View>
         </BottomSheetModal>
       </IOScrollView>
       <GoToUploadButton />

diff --git a/src/screens/detailedPost/DetailReportSheetContent.tsx b/src/screens/detailedPost/DetailReportSheetContent.tsx
@@ -50,7 +50,6 @@ const DetailReportSheetContent = ({
         autoFocus={true}
         limit={limit}
         limitTextStyle={{ color: `${theme.colors.graphic.black}50` }}
-        style={{ height: 500 }}
         height={350}
       />
     </View>
@@ -62,7 +61,7 @@ export default DetailReportSheetContent;
 const styles = StyleSheet.create({
   contentContainer: {
     width: '100%',
-    height: '80%',
+    height: 730,
     flexDirection: 'column',
     justifyContent: 'flex-start',
   },

diff --git a/src/screens/upload/FolderSheetContent.tsx b/src/screens/upload/FolderSheetContent.tsx
@@ -83,21 +83,18 @@ const FolderSheetContent = ({
               />
             );
           })}
+          <Pressable onPress={handleNewFolder} style={{ ...styles.folderContainer }}>
+            <Text
+              style={{
+                ...theme.fonts.text.body1.regular,
+                color: theme.colors.brand.onprimary.container,
+              }}
+            >
+              새 폴더 만들기
+            </Text>
+          </Pressable>
         </>
       )}
-
-      {!createFolder && (
-        <Pressable onPress={handleNewFolder} style={{ ...styles.folderContainer }}>
-          <Text
-            style={{
-              ...theme.fonts.text.body1.regular,
-              color: theme.colors.brand.onprimary.container,
-            }}
-          >
-            새 폴더 만들기
-          </Text>
-        </Pressable>
-      )}
     </BottomSheetScrollView>
   );
 };

diff --git a/src/screens/upload/UploadScreen.tsx b/src/screens/upload/UploadScreen.tsx
@@ -30,7 +30,6 @@ import isTextNotOnlySpace from '../../utils/helper/strings/isTextNotOnlySpace';
 import { useFocusEffect } from '@react-navigation/native';
 import * as Clipboard from 'expo-clipboard';
 import isDarkMode from '../../utils/helper/display/isDarkMode';
-import { Feather } from '@expo/vector-icons';
 
 const UploadScreen = ({ navigation, route }) => {
   const { isEdit, link, insightId } = route?.params ?? {};