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

Author: isekovanic

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}
     >
-      <SafeAreaView style={[{ backgroundColor: white }, container, footerStyle]}>
+      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, footerStyle, container]}>
         {photo.type === FileTypes.Video ? (
           videoControlElement ? (
             videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
@@ -202,7 +206,7 @@ export const ImageGalleryFooterWithContext = <
             </TouchableOpacity>
           )}
         </View>
-      </SafeAreaView>
+      </ReanimatedSafeAreaView>
     </Animated.View>
   );
 };

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'}
     >
-      <SafeAreaView style={[{ backgroundColor: white }, container, headerStyle]}>
+      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, headerStyle, container]}>
         <View style={[styles.innerContainer, innerContainer]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })
@@ -120,7 +129,7 @@ export const ImageGalleryHeader = <
             <View style={[styles.rightContainer, rightContainer]} />
           )}
         </View>
-      </SafeAreaView>
+      </ReanimatedSafeAreaView>
     </View>
   );
 };