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
-      keyboardBlurBehavior="restore"
+      keyboardBehavior='interactive' // l’input est dans le contenu → mode interactif OK
+      keyboardBlurBehavior='restore'
       enablePanDownToClose
       enableContentPanningGesture
-      stackBehavior="push"
+      stackBehavior='push'
       topInset={insets.top}
       bottomInset={insets.bottom}
       backdropComponent={renderBackdrop}
@@ -210,152 +212,174 @@ const CommentsBottomSheet = () => {
         //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
         // }
       >
-        <View style={{ paddingTop: 10, paddingBottom: 8 }}>
-          <Pressable
-            onPress={() => modalRef.current?.dismiss?.()}
-            style={{ position: 'absolute', right: 10, top: 8, padding: 6 }}
-            hitSlop={8}>
-            <Image
-              source={icons.close}
-              style={{ width: 22, height: 22, tintColor: Palette.white }}
-              resizeMode="contain"
-            />
-          </Pressable>
-          <Text
-            style={{
-              fontSize: 22,
-              color: Palette.white,
-              fontFamily: FONT_FAMILY.InterSemiBold,
-              alignSelf: 'center',
-            }}>
-            Commentaires
-          </Text>
-        </View>
-
-        <BottomSheetScrollView
-          keyboardShouldPersistTaps="handled"
-          onScroll={handleScroll}
-          scrollEventThrottle={100}
-          contentContainerStyle={{
-            paddingHorizontal: 14,
-            paddingBottom: (insets?.bottom || 0) + 12,
-          }}
-          showsVerticalScrollIndicator>
-          {Array.isArray(comments) && comments.length > 0 ? (
-            comments.map((c) => (
-              <View
-                key={c.id}
-                style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}>
-                {c?.profilePicture ? (
-                  <ExpoImage
-                    source={{ uri: c.profilePicture }}
-                    cachePolicy="memory-disk"
-                    priority="high"
-                    contentFit="cover"
-                    transition={100}
-                    style={{ ...size({ size: 42 }), borderRadius: 100 }}
-                  />
-                ) : (
-                  <View
-                    style={{
-                      ...size({ size: 42 }),
-                      borderRadius: 100,
-                      backgroundColor: '#FFFFFF22',
-                    }}
-                  />
-                )}
-                <View style={{ flex: 1 }}>
-                  <View
-                    style={{
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                      gap: 6,
-                    }}>
-                    <Text
-                      style={{
-                        fontSize: 12,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterMedium,
-                      }}>
-                      {c?.userId === currentUID ? 'vous' : c?.userName || ''}
-                    </Text>
-                    <Text
-                      style={{
-                        fontSize: 12,
-                        color: Palette.white,
-                        opacity: 0.75,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}>
-                      • {formatRelativeTime(c?.createdAt)}
-                    </Text>
-                  </View>
-                  <Text
-                    style={{
-                      fontSize: 14,
-                      color: Palette.white,
-                      fontFamily: FONT_FAMILY.InterRegular,
-                    }}>
-                    {c?.text}
-                  </Text>
-                </View>
-              </View>
-            ))
-          ) : (
-            <Text
-              style={{
-                fontSize: 14,
-                color: Palette.white,
-                opacity: 0.8,
-                fontFamily: FONT_FAMILY.InterRegular,
-                textAlign: 'center',
-                marginTop: 6,
-              }}>
-              Aucun commentaire pour le moment
-            </Text>
-          )}
-
-          {/* INPUT en bas du contenu */}
-          <View style={{ height: 12 }} />
-          <BlurView
-            intensity={Platform.OS !== 'ios' ? 10 : 20}
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 10,
-              paddingHorizontal: 16,
-              backgroundColor: Palette.glass,
-              overflow: 'hidden',
-              height: 54,
-              borderRadius: 16,
-            }}
-            // experimentalBlurMethod={
-            //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-            // }
-          >
-            <TextInput
-              placeholder="Ajouter un commentaire"
-              placeholderTextColor="#FFFFFFAA"
-              value={text}
-              onChangeText={setText}
-              onFocus={() => setTyping(true)}
-              onBlur={() => setTyping(false)}
-              style={{
-                flex: 1,
-                color: Palette.white,
-                fontSize: 14,
-                fontFamily: FONT_FAMILY.InterRegular,
-              }}
-            />
-            <Pressable onPress={onSend}>
+        <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?.()}
+              style={{ position: 'absolute', right: 10, top: 8, padding: 6 }}
+              hitSlop={8}>
               <Image
-                source={icons.send}
-                style={{ width: 24, height: 24, tintColor: Palette.white }}
-                resizeMode="contain"
+                source={icons.close}
+                style={{ width: 22, height: 22, tintColor: Palette.white }}
+                resizeMode='contain'
               />
             </Pressable>
-          </BlurView>
-          <View style={{ height: (insets?.bottom || 0) + 8 }} />
-        </BottomSheetScrollView>
+            <Text
+              style={{
+                fontSize: 22,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterSemiBold,
+                alignSelf: 'center',
+              }}>
+              Commentaires
+            </Text>
+          </View>
+
+          <BottomSheetScrollView
+            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) + 40,
+            }}
+            showsVerticalScrollIndicator>
+            {Array.isArray(comments) && comments.length > 0 ? (
+              comments.map((c) => (
+                <View
+                  key={c.id}
+                  style={{ flexDirection: 'row', gap: 12, marginBottom: 14 }}>
+                  {c?.profilePicture ? (
+                    <ExpoImage
+                      source={{ uri: c.profilePicture }}
+                      cachePolicy='memory-disk'
+                      priority='high'
+                      contentFit='cover'
+                      transition={100}
+                      style={{ ...size({ size: 42 }), borderRadius: 100 }}
+                    />
+                  ) : (
+                    <View
+                      style={{
+                        ...size({ size: 42 }),
+                        borderRadius: 100,
+                        backgroundColor: '#FFFFFF22',
+                      }}
+                    />
+                  )}
+                  <View style={{ flex: 1 }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                      }}>
+                      <Text
+                        style={{
+                          fontSize: 12,
+                          color: Palette.white,
+                          fontFamily: FONT_FAMILY.InterMedium,
+                        }}>
+                        {c?.userId === currentUID ? 'vous' : c?.userName || ''}
+                      </Text>
+                      <Text
+                        style={{
+                          fontSize: 12,
+                          color: Palette.white,
+                          opacity: 0.75,
+                          fontFamily: FONT_FAMILY.InterRegular,
+                        }}>
+                        • {formatRelativeTime(c?.createdAt)}
+                      </Text>
+                    </View>
+                    <Text
+                      style={{
+                        fontSize: 14,
+                        color: Palette.white,
+                        fontFamily: FONT_FAMILY.InterRegular,
+                      }}>
+                      {c?.text}
+                    </Text>
+                  </View>
+                </View>
+              ))
+            ) : (
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: Palette.white,
+                  opacity: 0.8,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                  textAlign: 'center',
+                  marginTop: 6,
+                }}>
+                Aucun commentaire pour le moment
+              </Text>
+            )}
+
+            {/* INPUT en bas du contenu */}
+            <View style={{ height: 12 }} />
+            <BlurView
+              intensity={Platform.OS !== 'ios' ? 10 : 20}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                paddingHorizontal: 16,
+                backgroundColor: Palette.glass,
+                overflow: 'hidden',
+                height: 54,
+                borderRadius: 16,
+              }}
+              // experimentalBlurMethod={
+              //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              // }
+            >
+              <TextInput
+                placeholder='Ajouter un commentaire'
+                placeholderTextColor='#FFFFFFAA'
+                value={text}
+                onChangeText={(t) => {
+                  setText(t);
+                }}
+                onFocus={() => {
+                  setTyping(true);
+                  setTimeout(() => {
+                    try {
+                      scrollRef.current?.scrollToEnd?.({ animated: true });
+                    } catch {}
+                  }, 50);
+                }}
+                onBlur={() => setTyping(false)}
+                style={{
+                  flex: 1,
+                  color: Palette.white,
+                  fontSize: 14,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              />
+              <Pressable onPress={onSend}>
+                <Image
+                  source={icons.send}
+                  style={{ width: 24, height: 24, tintColor: Palette.white }}
+                  resizeMode='contain'
+                />
+              </Pressable>
+            </BlurView>
+            <View style={{ height: (insets?.bottom || 0) + 24 }} />
+          </BottomSheetScrollView>
+        </KeyboardAvoidingView>
       </BlurView>
     </BottomSheetModal>
   );