fix - bottomSheet keyboard
This commit is contained in:
Victor
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user