diff --git a/src/screens/Media/ImageGalleryScreen.js b/src/screens/Media/ImageGalleryScreen.tsx
similarity index 70%
rename from src/screens/Media/ImageGalleryScreen.js
rename to src/screens/Media/ImageGalleryScreen.tsx
index 0cea27e..b77ecec 100644
--- a/src/screens/Media/ImageGalleryScreen.js
+++ b/src/screens/Media/ImageGalleryScreen.tsx
@@ -17,34 +17,42 @@
* along with Campus INSAT. If not, see .
*/
-// @flow
-
import * as React from 'react';
import {IconButton, Text} from 'react-native-paper';
import ImageViewer from 'react-native-image-zoom-viewer';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
import * as Animatable from 'react-native-animatable';
+import {View} from 'react-native';
+import {MainStackParamsList} from '../../navigation/MainNavigator';
-type PropsType = {
- navigation: StackNavigationProp,
- route: {params: {images: Array<{url: string}>}},
+type ImageGalleryScreenNavigationProp = StackScreenProps<
+ MainStackParamsList,
+ 'gallery'
+>;
+
+type Props = ImageGalleryScreenNavigationProp & {
+ navigation: StackNavigationProp;
};
-class ImageGalleryScreen extends React.Component {
+class ImageGalleryScreen extends React.Component {
images: Array<{url: string}>;
- closeButtonRef: {current: null | Animatable.View};
+ closeButtonRef: {current: null | (Animatable.View & View)};
- indicatorRef: {current: null | Animatable.View};
+ indicatorRef: {current: null | (Animatable.View & View)};
controlsShown: boolean;
- constructor(props: PropsType) {
+ constructor(props: Props) {
super(props);
this.closeButtonRef = React.createRef();
this.indicatorRef = React.createRef();
this.controlsShown = true;
- if (props.route.params != null) this.images = props.route.params.images;
+ if (props.route.params) {
+ this.images = props.route.params.images;
+ } else {
+ this.images = [];
+ }
}
goBack = () => {
@@ -52,7 +60,7 @@ class ImageGalleryScreen extends React.Component {
navigation.goBack();
};
- getRenderHeader = (): React.Node => {
+ getRenderHeader = () => {
return (
{
);
};
- getRenderIndicator = (
- currentIndex?: number,
- allSize?: number,
- ): React.Node => {
- if (currentIndex != null && allSize != null && allSize !== 1)
+ getRenderIndicator = (currentIndex?: number, allSize?: number) => {
+ if (currentIndex != null && allSize != null && allSize !== 1) {
return (
{
);
- return null;
+ }
+ return ;
};
onImageClick = () => {
- if (this.controlsShown) this.hideControls();
- else this.showControls();
+ if (this.controlsShown) {
+ this.hideControls();
+ } else {
+ this.showControls();
+ }
this.controlsShown = !this.controlsShown;
};
hideControls() {
- if (this.closeButtonRef.current != null)
+ if (this.closeButtonRef.current && this.closeButtonRef.current.fadeOutUp) {
this.closeButtonRef.current.fadeOutUp(200);
- if (this.indicatorRef.current != null)
+ }
+ if (this.indicatorRef.current && this.indicatorRef.current.fadeOutUp) {
this.indicatorRef.current.fadeOutUp(300);
+ }
}
showControls() {
- if (this.closeButtonRef.current != null)
+ if (this.closeButtonRef.current && this.closeButtonRef.current.fadeInDown) {
this.closeButtonRef.current.fadeInDown(300);
- if (this.indicatorRef.current != null)
+ }
+ if (this.indicatorRef.current && this.indicatorRef.current.fadeInDown) {
this.indicatorRef.current.fadeInDown(400);
+ }
}
- render(): React.Node {
+ render() {
return (