fix: image gallery safe area (#2855)

* fix: image gallery safe area

* fix: isMessageAIGenerated type issue

* fix: bring back animations for opening and closing of the gallery header/footer

Author: isekovanic

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}
         >
           <AppOverlayProvider>
             <UserSearchProvider>

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';
 
@@ -154,28 +158,26 @@ export const ImageGalleryFooterWithContext = <
   };
 
   return (
-    <SafeAreaView
+    <Animated.View
       accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <Animated.View style={footerStyle}>
-        <View style={[{ backgroundColor: white }, container]}>
-          {photo.type === FileTypes.Video ? (
-            videoControlElement ? (
-              videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
-            ) : (
-              <ImageGalleryVideoControl
-                duration={duration}
-                onPlayPause={onPlayPause}
-                paused={paused}
-                progress={progress}
-                videoRef={videoRef}
-              />
-            )
-          ) : null}
-        </View>
+      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, footerStyle, container]}>
+        {photo.type === FileTypes.Video ? (
+          videoControlElement ? (
+            videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
+          ) : (
+            <ImageGalleryVideoControl
+              duration={duration}
+              onPlayPause={onPlayPause}
+              paused={paused}
+              progress={progress}
+              videoRef={videoRef}
+            />
+          )
+        ) : null}
         <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
@@ -204,8 +206,8 @@ export const ImageGalleryFooterWithContext = <
             </TouchableOpacity>
           )}
         </View>
-      </Animated.View>
-    </SafeAreaView>
+      </ReanimatedSafeAreaView>
+    </Animated.View>
   );
 };
 

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -16,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,
 > = ({
@@ -58,6 +62,7 @@ export const ImageGalleryHeader = <
           centerContainer,
           container,
           dateText,
+          innerContainer,
           leftContainer,
           rightContainer,
           usernameText,
@@ -93,12 +98,12 @@ export const ImageGalleryHeader = <
   };
 
   return (
-    <SafeAreaView
+    <View
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <Animated.View style={headerStyle}>
-        <View style={[styles.container, { backgroundColor: white }, container]}>
+      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, headerStyle, container]}>
+        <View style={[styles.innerContainer, innerContainer]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
@@ -124,8 +129,8 @@ export const ImageGalleryHeader = <
             <View style={[styles.rightContainer, rightContainer]} />
           )}
         </View>
-      </Animated.View>
-    </SafeAreaView>
+      </ReanimatedSafeAreaView>
+    </View>
   );
 };
 
@@ -137,16 +142,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',

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: {},