From 842e57054cf2ad5a9034efec13dd651e53820a26 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Tue, 17 Dec 2024 15:19:28 +0100 Subject: [PATCH 1/3] fix: image gallery safe area --- .../components/ImageGalleryFooter.tsx | 36 +++++++++---------- .../components/ImageGalleryHeader.tsx | 28 +++++++-------- .../src/contexts/themeContext/utils/theme.ts | 2 ++ 3 files changed, 31 insertions(+), 35 deletions(-) diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx index 8a6a33807..252732e8c 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx @@ -154,28 +154,26 @@ export const ImageGalleryFooterWithContext = < }; return ( - setHeight(event.nativeEvent.layout.height)} pointerEvents={'box-none'} style={styles.wrapper} > - - - {photo.type === FileTypes.Video ? ( - videoControlElement ? ( - videoControlElement({ duration, onPlayPause, paused, progress, videoRef }) - ) : ( - - ) - ) : null} - + + {photo.type === FileTypes.Video ? ( + videoControlElement ? ( + videoControlElement({ duration, onPlayPause, paused, progress, videoRef }) + ) : ( + + ) + ) : null} {leftElement ? ( leftElement({ openGridView, photo, share, shareMenuOpen }) @@ -204,8 +202,8 @@ export const ImageGalleryFooterWithContext = < )} - - + + ); }; diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx index ef835f842..7aee82ee0 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx @@ -1,11 +1,6 @@ import React, { useMemo, useState } from 'react'; import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native'; -import Animated, { - Extrapolation, - interpolate, - SharedValue, - useAnimatedStyle, -} from 'react-native-reanimated'; +import { Extrapolation, interpolate, SharedValue, useAnimatedStyle } from 'react-native-reanimated'; import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; @@ -58,6 +53,7 @@ export const ImageGalleryHeader = < centerContainer, container, dateText, + innerContainer, leftContainer, rightContainer, usernameText, @@ -93,12 +89,12 @@ export const ImageGalleryHeader = < }; return ( - setHeight(event.nativeEvent.layout.height)} pointerEvents={'box-none'} > - - + + {leftElement ? ( leftElement({ hideOverlay, photo }) ) : ( @@ -124,8 +120,8 @@ export const ImageGalleryHeader = < )} - - + + ); }; @@ -137,16 +133,16 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', }, - container: { - flexDirection: 'row', - justifyContent: 'space-between', - paddingVertical: 8, - }, date: { fontSize: 12, fontWeight: '500', opacity: 0.5, }, + innerContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingVertical: 8, + }, leftContainer: { flex: 1, justifyContent: 'center', diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts index e769e3471..21e5468f6 100644 --- a/package/src/contexts/themeContext/utils/theme.ts +++ b/package/src/contexts/themeContext/utils/theme.ts @@ -226,6 +226,7 @@ export type Theme = { centerContainer: ViewStyle; container: ViewStyle; dateText: TextStyle; + innerContainer: ViewStyle; leftContainer: ViewStyle; rightContainer: ViewStyle; usernameText: TextStyle; @@ -983,6 +984,7 @@ export const defaultTheme: Theme = { centerContainer: {}, container: {}, dateText: {}, + innerContainer: {}, leftContainer: {}, rightContainer: {}, usernameText: {}, From 6469f4be8547a35824218a2c93a1fffda3a4fe7b Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Tue, 17 Dec 2024 15:20:17 +0100 Subject: [PATCH 2/3] fix: isMessageAIGenerated type issue --- examples/SampleApp/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/SampleApp/App.tsx b/examples/SampleApp/App.tsx index 421521984..f28a2daca 100644 --- a/examples/SampleApp/App.tsx +++ b/examples/SampleApp/App.tsx @@ -183,7 +183,7 @@ const DrawerNavigatorWrapper: React.FC<{ enableOfflineSupport // @ts-expect-error ImageComponent={FastImage} - isMessageAIGenerated={(message: MessageType) => message.ai_generated} + isMessageAIGenerated={(message: MessageType) => !!message.ai_generated} > From b682bd5648a0001c63bda7abcf010f23c96d305f Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Tue, 17 Dec 2024 17:03:44 +0100 Subject: [PATCH 3/3] fix: bring back animations for opening and closing of the gallery header/footer --- .../components/ImageGalleryFooter.tsx | 8 ++++++-- .../components/ImageGalleryHeader.tsx | 15 ++++++++++++--- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx index 252732e8c..e2bd876f9 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx @@ -21,6 +21,10 @@ import { VideoType, } from '../../../native'; +const ReanimatedSafeAreaView = Animated.createAnimatedComponent + ? Animated.createAnimatedComponent(SafeAreaView) + : SafeAreaView; + import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types'; import type { Photo } from '../ImageGallery'; @@ -160,7 +164,7 @@ export const ImageGalleryFooterWithContext = < pointerEvents={'box-none'} style={styles.wrapper} > - + {photo.type === FileTypes.Video ? ( videoControlElement ? ( videoControlElement({ duration, onPlayPause, paused, progress, videoRef }) @@ -202,7 +206,7 @@ export const ImageGalleryFooterWithContext = < )} - + ); }; diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx index 7aee82ee0..a2afec24d 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx @@ -1,6 +1,11 @@ import React, { useMemo, useState } from 'react'; import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native'; -import { Extrapolation, interpolate, SharedValue, useAnimatedStyle } from 'react-native-reanimated'; +import Animated, { + Extrapolation, + interpolate, + SharedValue, + useAnimatedStyle, +} from 'react-native-reanimated'; import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; @@ -11,6 +16,10 @@ import type { DefaultStreamChatGenerics } from '../../../types/types'; import { getDateString } from '../../../utils/i18n/getDateString'; import type { Photo } from '../ImageGallery'; +const ReanimatedSafeAreaView = Animated.createAnimatedComponent + ? Animated.createAnimatedComponent(SafeAreaView) + : SafeAreaView; + export type ImageGalleryHeaderCustomComponent< StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, > = ({ @@ -93,7 +102,7 @@ export const ImageGalleryHeader = < onLayout={(event) => setHeight(event.nativeEvent.layout.height)} pointerEvents={'box-none'} > - + {leftElement ? ( leftElement({ hideOverlay, photo }) @@ -120,7 +129,7 @@ export const ImageGalleryHeader = < )} - + ); };