leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix - bottomSheet keyboard

Browse Source
This commit is contained in:
Victor
2025-09-17 10:13:12 +02:00
parent 5ef6ffbab2
commit 2d4642891d
1 changed files with 172 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/bottomsheets/CommentsBottomSheet.js
+172 -148
View File
@@ -20,6 +20,7 @@ import {
Text, Text,
TextInput, TextInput,
View, View,
KeyboardAvoidingView,
} from 'react-native'; } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { icons } from '../../assets'; import { icons } from '../../assets';
@@ -61,6 +62,7 @@ const CommentsBottomSheet = () => {
const modalRef = useRef(null); const modalRef = useRef(null);
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const { currentUID, currentUserData } = useUser(); const { currentUID, currentUserData } = useUser();
const scrollRef = useRef(null);
const [projectId, setProjectId] = useState(null); const [projectId, setProjectId] = useState(null);
const [text, setText] = useState(''); const [text, setText] = useState('');
@@ -82,7 +84,7 @@ const CommentsBottomSheet = () => {
}; };
}, []); }, []);
const snapPoints = useMemo(() => ['50%', '90%'], []); const snapPoints = useMemo(() => ['90%'], []);
const commentsRef = useMemo(() => { const commentsRef = useMemo(() => {
try { try {
@@ -156,7 +158,7 @@ const CommentsBottomSheet = () => {
{...props} {...props}
appearsOnIndex={0} appearsOnIndex={0}
disappearsOnIndex={-1} disappearsOnIndex={-1}
pressBehavior="close" pressBehavior='close'
/> />
), ),
[] []
@@ -183,11 +185,11 @@ const CommentsBottomSheet = () => {
<BottomSheetModal <BottomSheetModal
ref={modalRef} ref={modalRef}
snapPoints={snapPoints} 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 enablePanDownToClose
enableContentPanningGesture enableContentPanningGesture
stackBehavior="push" stackBehavior='push'
topInset={insets.top} topInset={insets.top}
bottomInset={insets.bottom} bottomInset={insets.bottom}
backdropComponent={renderBackdrop} backdropComponent={renderBackdrop}
@@ -210,152 +212,174 @@ const CommentsBottomSheet = () => {
// Platform.OS !== "ios" ? "dimezisBlurView" : "none" // Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// } // }
> >
<View style={{ paddingTop: 10, paddingBottom: 8 }}> <KeyboardAvoidingView
<Pressable style={{ flex: 1 }}
onPress={() => modalRef.current?.dismiss?.()} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{ position: 'absolute', right: 10, top: 8, padding: 6 }} keyboardVerticalOffset={(insets?.bottom || 0) + 36}>
hitSlop={8}> <View style={{ paddingTop: 10, paddingBottom: 8 }}>
<Image <Pressable
source={icons.close} onPress={() => modalRef.current?.dismiss?.()}
style={{ width: 22, height: 22, tintColor: Palette.white }} style={{ position: 'absolute', right: 10, top: 8, padding: 6 }}
resizeMode="contain" hitSlop={8}>
/>
</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}>
<Image <Image
source={icons.send} source={icons.close}
style={{ width: 24, height: 24, tintColor: Palette.white }} style={{ width: 22, height: 22, tintColor: Palette.white }}
resizeMode="contain" resizeMode='contain'
/> />
</Pressable> </Pressable>
</BlurView> <Text
<View style={{ height: (insets?.bottom || 0) + 8 }} /> style={{
</BottomSheetScrollView> 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> </BlurView>
</BottomSheetModal> </BottomSheetModal>
); );