stream-chat-react-native-core 5.40.0-rc.2 → 5.40.0

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,29 +1,53 @@
 import React, { useState } from 'react';
 import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
 import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
-import {
-  deleteFile,
-  isFileSystemAvailable,
-  isShareImageAvailable,
-  saveFile,
-  shareImage,
-  VideoType,
-} from '../../../native';
+import { deleteFile, saveFile, shareImage, VideoType } from '../../../native';
 
 import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
+const ReanimatedSafeAreaView = Animated.createAnimatedComponent
+  ? Animated.createAnimatedComponent(SafeAreaView)
+  : SafeAreaView;
+
+const styles = StyleSheet.create({
+  centerContainer: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  imageCountText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  innerContainer: {
+    flexDirection: 'row',
+    minHeight: 56,
+  },
+  leftContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
+  rightContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginRight: 8,
+  },
+  wrapper: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+  },
+});
+
 export type ImageGalleryFooterCustomComponent<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ({
@@ -70,7 +94,7 @@ type ImageGalleryFooterPropsWithContext<
   accessibilityLabel: string;
   duration: number;
   onPlayPause: () => void;
-  opacity: SharedValue<number>;
+  opacity: Animated.SharedValue<number>;
   openGridView: () => void;
   paused: boolean;
   photo: Photo<StreamChatGenerics>;
@@ -78,7 +102,7 @@ type ImageGalleryFooterPropsWithContext<
   progress: number;
   selectedIndex: number;
   videoRef: React.RefObject<VideoType>;
-  visible: SharedValue<number>;
+  visible: Animated.SharedValue<number>;
 };
 
 export const ImageGalleryFooterWithContext = <
@@ -124,7 +148,7 @@ export const ImageGalleryFooterWithContext = <
       opacity: opacity.value,
       transform: [
         {
-          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolation.CLAMP),
+          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolate.CLAMP),
         },
       ],
     }),
@@ -151,58 +175,56 @@ export const ImageGalleryFooterWithContext = <
   };
 
   return (
-    <View
+    <Animated.View
       accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <Animated.View style={footerStyle}>
-        <SafeAreaView 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 style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
-            {leftElement ? (
-              leftElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <ShareButton share={share} ShareIcon={ShareIcon} shareMenuOpen={shareMenuOpen} />
-            )}
-            {centerElement ? (
-              centerElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <View style={[styles.centerContainer, centerContainer]}>
-                <Text style={[styles.imageCountText, { color: black }, imageCountText]}>
-                  {t<string>('{{ index }} of {{ photoLength }}', {
-                    index: photoLength - selectedIndex,
-                    photoLength,
-                  })}
-                </Text>
+      <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 })
+          ) : (
+            <ShareButton share={share} ShareIcon={ShareIcon} shareMenuOpen={shareMenuOpen} />
+          )}
+          {centerElement ? (
+            centerElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <View style={[styles.centerContainer, centerContainer]}>
+              <Text style={[styles.imageCountText, { color: black }, imageCountText]}>
+                {t<string>('{{ index }} of {{ photoLength }}', {
+                  index: photoLength - selectedIndex,
+                  photoLength,
+                })}
+              </Text>
+            </View>
+          )}
+          {rightElement ? (
+            rightElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <TouchableOpacity onPress={openGridView}>
+              <View style={[styles.rightContainer, rightContainer]}>
+                {GridIcon ? GridIcon : <GridIconDefault />}
               </View>
-            )}
-            {rightElement ? (
-              rightElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <TouchableOpacity onPress={openGridView}>
-                <View style={[styles.rightContainer, rightContainer]}>
-                  {GridIcon ? GridIcon : <GridIconDefault />}
-                </View>
-              </TouchableOpacity>
-            )}
-          </View>
-        </SafeAreaView>
-      </Animated.View>
-    </View>
+            </TouchableOpacity>
+          )}
+        </View>
+      </ReanimatedSafeAreaView>
+    </Animated.View>
   );
 };
 
@@ -222,8 +244,7 @@ const ShareButton = ({ share, ShareIcon, shareMenuOpen }: ShareButtonProps) => {
     },
   } = useTheme();
 
-  // If the shareImage, saveFile or deleteFile is null, we don't want to render the share button
-  if (!isShareImageAvailable() || !isFileSystemAvailable()) {
+  if (shareImage === null) {
     return null;
   }
 
@@ -284,35 +305,3 @@ export const ImageGalleryFooter = <
 ) => <MemoizedImageGalleryFooter {...props} />;
 
 ImageGalleryFooter.displayName = 'ImageGalleryFooter{imageGallery{footer}}';
-
-const styles = StyleSheet.create({
-  centerContainer: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  imageCountText: {
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  innerContainer: {
-    flexDirection: 'row',
-    height: 56,
-  },
-  leftContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginLeft: 8,
-  },
-  rightContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginRight: 8,
-  },
-  wrapper: {
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    right: 0,
-  },
-});

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 Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -16,6 +11,41 @@ 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;
+
+const styles = StyleSheet.create({
+  centerContainer: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  date: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginTop: 4,
+    opacity: 0.5,
+  },
+  innerContainer: {
+    flexDirection: 'row',
+    minHeight: 56,
+  },
+  leftContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
+  rightContainer: {
+    marginRight: 8,
+    width: 24, // Width of icon currently on left
+  },
+  userName: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});
+
 export type ImageGalleryHeaderCustomComponent<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ({
@@ -37,8 +67,8 @@ export type ImageGalleryHeaderCustomComponentProps<
 
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryHeaderCustomComponentProps<StreamChatGenerics> & {
-    opacity: SharedValue<number>;
-    visible: SharedValue<number>;
+    opacity: Animated.SharedValue<number>;
+    visible: Animated.SharedValue<number>;
     photo?: Photo<StreamChatGenerics>;
     /* Lookup key in the language corresponding translations sheet to perform date formatting */
   };
@@ -58,6 +88,7 @@ export const ImageGalleryHeader = <
           centerContainer,
           container,
           dateText,
+          innerContainer,
           leftContainer,
           rightContainer,
           usernameText,
@@ -83,7 +114,7 @@ export const ImageGalleryHeader = <
     opacity: opacity.value,
     transform: [
       {
-        translateY: interpolate(visible.value, [0, 1], [-height, 0], Extrapolation.CLAMP),
+        translateY: interpolate(visible.value, [0, 1], [-height, 0], Extrapolate.CLAMP),
       },
     ],
   }));
@@ -97,8 +128,8 @@ export const ImageGalleryHeader = <
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <Animated.View style={headerStyle}>
-        <SafeAreaView style={[styles.container, { backgroundColor: white }, container]}>
+      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, container, headerStyle]}>
+        <View style={[styles.innerContainer, innerContainer]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
@@ -123,43 +154,10 @@ export const ImageGalleryHeader = <
           ) : (
             <View style={[styles.rightContainer, rightContainer]} />
           )}
-        </SafeAreaView>
-      </Animated.View>
+        </View>
+      </ReanimatedSafeAreaView>
     </View>
   );
 };
 
 ImageGalleryHeader.displayName = 'ImageGalleryHeader{imageGallery{header}}';
-
-const styles = StyleSheet.create({
-  centerContainer: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 4,
-  },
-  date: {
-    fontSize: 12,
-    fontWeight: '500',
-    marginBottom: 8,
-    opacity: 0.5,
-  },
-  leftContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginLeft: 8,
-  },
-  rightContainer: {
-    marginRight: 8,
-    width: 24, // Width of icon currently on left
-  },
-  userName: {
-    fontSize: 16,
-    fontWeight: '700',
-    marginBottom: 2,
-  },
-});

package/src/components/ImageGallery/components/ImageGalleryOverlay.tsx

@@ -8,7 +8,6 @@ import {
 import Animated, {
   Easing,
   runOnJS,
-  SharedValue,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -17,7 +16,7 @@ import Animated, {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 type Props = {
-  animatedBottomSheetIndex: SharedValue<number>;
+  animatedBottomSheetIndex: Animated.SharedValue<number>;
   closeGridView: () => void;
   currentBottomSheetIndex: number;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SharedValue, useSharedValue } from 'react-native-reanimated';
+import type Animated from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
 
 import { render, renderHook, waitFor } from '@testing-library/react-native';
 
@@ -9,8 +10,8 @@ import { ImageGalleryHeader } from '../ImageGalleryHeader';
 
 it('doesnt fail if fromNow is not available on first render', async () => {
   try {
-    let sharedValueOpacity: SharedValue<number>;
-    let sharedValueVisible: SharedValue<number>;
+    let sharedValueOpacity: Animated.SharedValue<number>;
+    let sharedValueVisible: Animated.SharedValue<number>;
     renderHook(() => {
       sharedValueOpacity = useSharedValue(1);
       sharedValueVisible = useSharedValue(1);