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