Skip to content

Commit

Permalink
fix: image gallery safe area
Browse files Browse the repository at this point in the history
  • Loading branch information
isekovanic committed Dec 17, 2024
1 parent 851237c commit 842e570
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 35 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -154,28 +154,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>
<SafeAreaView style={[{ backgroundColor: white }, container, footerStyle]}>
{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 })
Expand Down Expand Up @@ -204,8 +202,8 @@ export const ImageGalleryFooterWithContext = <
</TouchableOpacity>
)}
</View>
</Animated.View>
</SafeAreaView>
</SafeAreaView>
</Animated.View>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -58,6 +53,7 @@ export const ImageGalleryHeader = <
centerContainer,
container,
dateText,
innerContainer,
leftContainer,
rightContainer,
usernameText,
Expand Down Expand Up @@ -93,12 +89,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]}>
<SafeAreaView style={[{ backgroundColor: white }, container, headerStyle]}>
<View style={[styles.innerContainer, innerContainer]}>
{leftElement ? (
leftElement({ hideOverlay, photo })
) : (
Expand All @@ -124,8 +120,8 @@ export const ImageGalleryHeader = <
<View style={[styles.rightContainer, rightContainer]} />
)}
</View>
</Animated.View>
</SafeAreaView>
</SafeAreaView>
</View>
);
};

Expand All @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions package/src/contexts/themeContext/utils/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,7 @@ export type Theme = {
centerContainer: ViewStyle;
container: ViewStyle;
dateText: TextStyle;
innerContainer: ViewStyle;
leftContainer: ViewStyle;
rightContainer: ViewStyle;
usernameText: TextStyle;
Expand Down Expand Up @@ -983,6 +984,7 @@ export const defaultTheme: Theme = {
centerContainer: {},
container: {},
dateText: {},
innerContainer: {},
leftContainer: {},
rightContainer: {},
usernameText: {},
Expand Down

0 comments on commit 842e570

Please sign in to comment.