fix - comments bottom sheet

src/components/bottomsheets/CommentsBottomSheet.js

@@ -3,6 +3,7 @@ import {
   BottomSheetBackdrop,
   BottomSheetModal,
   BottomSheetScrollView,
+  BottomSheetTextInput,
 } from '@gorhom/bottom-sheet';
 import { BlurView } from 'expo-blur';
 import { Image as ExpoImage } from 'expo-image';
@@ -18,7 +19,6 @@ import {
   Platform,
   Pressable,
   Text,
-  TextInput,
   View,
   KeyboardAvoidingView,
 } from 'react-native';
@@ -86,6 +86,13 @@ const CommentsBottomSheet = () => {
 
   const snapPoints = useMemo(() => ['90%'], []);
 
+  const INPUT_HEIGHT = 54;
+  const INPUT_MARGIN_VERTICAL = 12;
+  const bottomPadding = useMemo(
+    () => INPUT_HEIGHT + INPUT_MARGIN_VERTICAL + (insets?.bottom || 0) + 12,
+    [insets?.bottom]
+  );
+
   const commentsRef = useMemo(() => {
     try {
       return projectId
@@ -237,10 +244,11 @@ const CommentsBottomSheet = () => {
               Commentaires
             </Text>
           </View>
-
+          <View style={{ flex: 1 }}>
             <BottomSheetScrollView
               ref={scrollRef}
               keyboardShouldPersistTaps='handled'
+              keyboardDismissMode='interactive'
               onContentSizeChange={() => {
                 if (typing) {
                   try {
@@ -252,7 +260,7 @@ const CommentsBottomSheet = () => {
               scrollEventThrottle={100}
               contentContainerStyle={{
                 paddingHorizontal: 14,
-              paddingBottom: (insets?.bottom || 0) + 40,
+                paddingBottom: bottomPadding,
               }}
               showsVerticalScrollIndicator>
               {Array.isArray(comments) && comments.length > 0 ? (
@@ -291,7 +299,9 @@ const CommentsBottomSheet = () => {
                             color: Palette.white,
                             fontFamily: FONT_FAMILY.InterMedium,
                           }}>
-                        {c?.userId === currentUID ? 'vous' : c?.userName || ''}
+                          {c?.userId === currentUID
+                            ? 'vous'
+                            : c?.userName || ''}
                         </Text>
                         <Text
                           style={{
@@ -327,9 +337,15 @@ const CommentsBottomSheet = () => {
                   Aucun commentaire pour le moment
                 </Text>
               )}
+            </BottomSheetScrollView>
 
-            {/* INPUT en bas du contenu */}
-            <View style={{ height: 12 }} />
+            <View
+              style={{
+                position: 'absolute',
+                left: 14,
+                right: 14,
+                bottom: (insets?.bottom || 0) + INPUT_MARGIN_VERTICAL,
+              }}>
               <BlurView
                 intensity={Platform.OS !== 'ios' ? 10 : 20}
                 style={{
@@ -339,14 +355,14 @@ const CommentsBottomSheet = () => {
                   paddingHorizontal: 16,
                   backgroundColor: Palette.glass,
                   overflow: 'hidden',
-                height: 54,
+                  height: INPUT_HEIGHT,
                   borderRadius: 16,
                 }}
                 // experimentalBlurMethod={
                 //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                 // }
               >
-              <TextInput
+                <BottomSheetTextInput
                   placeholder='Ajouter un commentaire'
                   placeholderTextColor='#FFFFFFAA'
                   value={text}
@@ -355,11 +371,6 @@ const CommentsBottomSheet = () => {
                   }}
                   onFocus={() => {
                     setTyping(true);
-                  setTimeout(() => {
-                    try {
-                      scrollRef.current?.scrollToEnd?.({ animated: true });
-                    } catch {}
-                  }, 50);
                   }}
                   onBlur={() => setTyping(false)}
                   style={{
@@ -377,8 +388,8 @@ const CommentsBottomSheet = () => {
                   />
                 </Pressable>
               </BlurView>
-            <View style={{ height: (insets?.bottom || 0) + 24 }} />
-          </BottomSheetScrollView>
+            </View>
+          </View>
         </KeyboardAvoidingView>
       </BlurView>
     </BottomSheetModal>