diff --git a/src/screens/Media/ImageGalleryScreen.tsx b/src/screens/Media/ImageGalleryScreen.tsx index b77ecec..407aa6d 100644 --- a/src/screens/Media/ImageGalleryScreen.tsx +++ b/src/screens/Media/ImageGalleryScreen.tsx @@ -22,7 +22,7 @@ import {IconButton, Text} from 'react-native-paper'; import ImageViewer from 'react-native-image-zoom-viewer'; import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack'; import * as Animatable from 'react-native-animatable'; -import {View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {MainStackParamsList} from '../../navigation/MainNavigator'; type ImageGalleryScreenNavigationProp = StackScreenProps< @@ -34,6 +34,34 @@ type Props = ImageGalleryScreenNavigationProp & { navigation: StackNavigationProp; }; +const styles = StyleSheet.create({ + closeButtonContainer: { + position: 'absolute', + top: 10, + left: 10, + zIndex: 1000, + }, + closeButtonIcon: { + backgroundColor: 'rgba(0,0,0,0.6)', + }, + indicatorContainer: { + width: '100%', + height: 50, + position: 'absolute', + }, + indicatorText: { + marginLeft: 'auto', + marginRight: 'auto', + marginTop: 'auto', + marginBottom: 'auto', + fontSize: 15, + backgroundColor: 'rgba(0,0,0,0.6)', + color: 'white', + padding: 10, + borderRadius: 20, + }, +}); + class ImageGalleryScreen extends React.Component { images: Array<{url: string}>; @@ -65,17 +93,13 @@ class ImageGalleryScreen extends React.Component { + style={styles.closeButtonContainer}> ); @@ -87,22 +111,8 @@ class ImageGalleryScreen extends React.Component { - + style={styles.indicatorContainer}> + {currentIndex}/{allSize}