|
@@ -22,7 +22,7 @@ import {IconButton, Text} from 'react-native-paper';
|
22
|
22
|
import ImageViewer from 'react-native-image-zoom-viewer';
|
23
|
23
|
import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
|
24
|
24
|
import * as Animatable from 'react-native-animatable';
|
25
|
|
-import {View} from 'react-native';
|
|
25
|
+import {StyleSheet, View} from 'react-native';
|
26
|
26
|
import {MainStackParamsList} from '../../navigation/MainNavigator';
|
27
|
27
|
|
28
|
28
|
type ImageGalleryScreenNavigationProp = StackScreenProps<
|
|
@@ -34,6 +34,34 @@ type Props = ImageGalleryScreenNavigationProp & {
|
34
|
34
|
navigation: StackNavigationProp<any>;
|
35
|
35
|
};
|
36
|
36
|
|
|
37
|
+const styles = StyleSheet.create({
|
|
38
|
+ closeButtonContainer: {
|
|
39
|
+ position: 'absolute',
|
|
40
|
+ top: 10,
|
|
41
|
+ left: 10,
|
|
42
|
+ zIndex: 1000,
|
|
43
|
+ },
|
|
44
|
+ closeButtonIcon: {
|
|
45
|
+ backgroundColor: 'rgba(0,0,0,0.6)',
|
|
46
|
+ },
|
|
47
|
+ indicatorContainer: {
|
|
48
|
+ width: '100%',
|
|
49
|
+ height: 50,
|
|
50
|
+ position: 'absolute',
|
|
51
|
+ },
|
|
52
|
+ indicatorText: {
|
|
53
|
+ marginLeft: 'auto',
|
|
54
|
+ marginRight: 'auto',
|
|
55
|
+ marginTop: 'auto',
|
|
56
|
+ marginBottom: 'auto',
|
|
57
|
+ fontSize: 15,
|
|
58
|
+ backgroundColor: 'rgba(0,0,0,0.6)',
|
|
59
|
+ color: 'white',
|
|
60
|
+ padding: 10,
|
|
61
|
+ borderRadius: 20,
|
|
62
|
+ },
|
|
63
|
+});
|
|
64
|
+
|
37
|
65
|
class ImageGalleryScreen extends React.Component<Props> {
|
38
|
66
|
images: Array<{url: string}>;
|
39
|
67
|
|
|
@@ -65,17 +93,13 @@ class ImageGalleryScreen extends React.Component<Props> {
|
65
|
93
|
<Animatable.View
|
66
|
94
|
ref={this.closeButtonRef}
|
67
|
95
|
useNativeDriver
|
68
|
|
- style={{
|
69
|
|
- position: 'absolute',
|
70
|
|
- top: 10,
|
71
|
|
- left: 10,
|
72
|
|
- zIndex: 1000,
|
73
|
|
- }}>
|
|
96
|
+ style={styles.closeButtonContainer}>
|
74
|
97
|
<IconButton
|
75
|
98
|
onPress={this.goBack}
|
76
|
99
|
icon="close"
|
77
|
100
|
size={30}
|
78
|
|
- style={{backgroundColor: 'rgba(0,0,0,0.6)'}}
|
|
101
|
+ color={'white'}
|
|
102
|
+ style={styles.closeButtonIcon}
|
79
|
103
|
/>
|
80
|
104
|
</Animatable.View>
|
81
|
105
|
);
|
|
@@ -87,22 +111,8 @@ class ImageGalleryScreen extends React.Component<Props> {
|
87
|
111
|
<Animatable.View
|
88
|
112
|
ref={this.indicatorRef}
|
89
|
113
|
useNativeDriver
|
90
|
|
- style={{
|
91
|
|
- width: '100%',
|
92
|
|
- height: 50,
|
93
|
|
- position: 'absolute',
|
94
|
|
- }}>
|
95
|
|
- <Text
|
96
|
|
- style={{
|
97
|
|
- marginLeft: 'auto',
|
98
|
|
- marginRight: 'auto',
|
99
|
|
- marginTop: 'auto',
|
100
|
|
- marginBottom: 'auto',
|
101
|
|
- fontSize: 15,
|
102
|
|
- backgroundColor: 'rgba(0,0,0,0.6)',
|
103
|
|
- padding: 10,
|
104
|
|
- borderRadius: 20,
|
105
|
|
- }}>
|
|
114
|
+ style={styles.indicatorContainer}>
|
|
115
|
+ <Text style={styles.indicatorText}>
|
106
|
116
|
{currentIndex}/{allSize}
|
107
|
117
|
</Text>
|
108
|
118
|
</Animatable.View>
|