fix - bottomSheet keyboard

src/components/bottomsheets/CommentsBottomSheet.js

@@ -20,6 +20,7 @@ import {
   Text,
   TextInput,
   View,
+  KeyboardAvoidingView,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { icons } from '../../assets';
@@ -61,6 +62,7 @@ const CommentsBottomSheet = () => {
   const modalRef = useRef(null);
   const insets = useSafeAreaInsets();
   const { currentUID, currentUserData } = useUser();
+  const scrollRef = useRef(null);
 
   const [projectId, setProjectId] = useState(null);
   const [text, setText] = useState('');
@@ -82,7 +84,7 @@ const CommentsBottomSheet = () => {
     };
   }, []);
 
-  const snapPoints = useMemo(() => ['50%', '90%'], []);
+  const snapPoints = useMemo(() => ['90%'], []);
 
   const commentsRef = useMemo(() => {
     try {
@@ -156,7 +158,7 @@ const CommentsBottomSheet = () => {
         {...props}
         appearsOnIndex={0}
         disappearsOnIndex={-1}
-        pressBehavior="close"
+        pressBehavior='close'
       />
     ),
     []
@@ -183,11 +185,11 @@ const CommentsBottomSheet = () => {
     <BottomSheetModal
       ref={modalRef}
       snapPoints={snapPoints}
-      keyboardBehavior="interactive" // l’input est dans le contenu → mode interactif OK
+      keyboardBehavior='interactive' // l’input est dans le contenu → mode interactif OK
-      keyboardBlurBehavior="restore"
+      keyboardBlurBehavior='restore'
       enablePanDownToClose
       enableContentPanningGesture
-      stackBehavior="push"
+      stackBehavior='push'
       topInset={insets.top}
       bottomInset={insets.bottom}
       backdropComponent={renderBackdrop}
@@ -210,6 +212,10 @@ const CommentsBottomSheet = () => {
         //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
         // }
       >
+        <KeyboardAvoidingView
+          style={{ flex: 1 }}
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={(insets?.bottom || 0) + 36}>
           <View style={{ paddingTop: 10, paddingBottom: 8 }}>
             <Pressable
               onPress={() => modalRef.current?.dismiss?.()}
@@ -218,7 +224,7 @@ const CommentsBottomSheet = () => {
               <Image
                 source={icons.close}
                 style={{ width: 22, height: 22, tintColor: Palette.white }}
-              resizeMode="contain"
+                resizeMode='contain'
               />
             </Pressable>
             <Text
@@ -233,12 +239,20 @@ const CommentsBottomSheet = () => {
           </View>
 
           <BottomSheetScrollView
-          keyboardShouldPersistTaps="handled"
+            ref={scrollRef}
+            keyboardShouldPersistTaps='handled'
+            onContentSizeChange={() => {
+              if (typing) {
+                try {
+                  scrollRef.current?.scrollToEnd?.({ animated: true });
+                } catch {}
+              }
+            }}
             onScroll={handleScroll}
             scrollEventThrottle={100}
             contentContainerStyle={{
               paddingHorizontal: 14,
-            paddingBottom: (insets?.bottom || 0) + 12,
+              paddingBottom: (insets?.bottom || 0) + 40,
             }}
             showsVerticalScrollIndicator>
             {Array.isArray(comments) && comments.length > 0 ? (
@@ -249,9 +263,9 @@ const CommentsBottomSheet = () => {
                   {c?.profilePicture ? (
                     <ExpoImage
                       source={{ uri: c.profilePicture }}
-                    cachePolicy="memory-disk"
+                      cachePolicy='memory-disk'
-                    priority="high"
+                      priority='high'
-                    contentFit="cover"
+                      contentFit='cover'
                       transition={100}
                       style={{ ...size({ size: 42 }), borderRadius: 100 }}
                     />
@@ -333,11 +347,20 @@ const CommentsBottomSheet = () => {
               // }
             >
               <TextInput
-              placeholder="Ajouter un commentaire"
+                placeholder='Ajouter un commentaire'
-              placeholderTextColor="#FFFFFFAA"
+                placeholderTextColor='#FFFFFFAA'
                 value={text}
-              onChangeText={setText}
+                onChangeText={(t) => {
-              onFocus={() => setTyping(true)}
+                  setText(t);
+                }}
+                onFocus={() => {
+                  setTyping(true);
+                  setTimeout(() => {
+                    try {
+                      scrollRef.current?.scrollToEnd?.({ animated: true });
+                    } catch {}
+                  }, 50);
+                }}
                 onBlur={() => setTyping(false)}
                 style={{
                   flex: 1,
@@ -350,12 +373,13 @@ const CommentsBottomSheet = () => {
                 <Image
                   source={icons.send}
                   style={{ width: 24, height: 24, tintColor: Palette.white }}
-                resizeMode="contain"
+                  resizeMode='contain'
                 />
               </Pressable>
             </BlurView>
-          <View style={{ height: (insets?.bottom || 0) + 8 }} />
+            <View style={{ height: (insets?.bottom || 0) + 24 }} />
           </BottomSheetScrollView>
+        </KeyboardAvoidingView>
       </BlurView>
     </BottomSheetModal>
   );