[IMPROVE] - migrate ImageViewer presentation layer

app/presentation/ImageViewer/ImageComponent.ts

@@ -1,6 +1,6 @@
 import { types } from './types';
 
-export const ImageComponent = (type) => {
+export const ImageComponent = (type: string) => {
 	let Component;
 	if (type === types.REACT_NATIVE_IMAGE) {
 		const { Image } = require('react-native');

app/presentation/ImageViewer/ImageViewer.android.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
-import {
+import { PanGestureHandler, State, PinchGestureHandler } from 'react-native-gesture-handler';
-	PanGestureHandler,
-	State,
-	PinchGestureHandler
-} from 'react-native-gesture-handler';
 import Animated, { Easing } from 'react-native-reanimated';
 import { ImageComponent } from './ImageComponent';
 import { themes } from '../../constants/colors';
@@ -44,13 +40,13 @@ const {
 	event
 } = Animated;
 
-function scaleDiff(value) {
+function scaleDiff(value: any) {
 	const tmp = new Value(1);
 	const prev = new Value(1);
 	return [set(tmp, divide(value, prev)), set(prev, value), tmp];
 }
 
-function dragDiff(value, updating) {
+function dragDiff(value: any, updating: any) {
 	const tmp = new Value(0);
 	const prev = new Value(0);
 	return cond(
@@ -63,7 +59,7 @@ function dragDiff(value, updating) {
 // returns linear friction coeff. When `value` is 0 coeff is 1 (no friction), then
 // it grows linearly until it reaches `MAX_FRICTION` when `value` is equal
 // to `MAX_VALUE`
-function friction(value) {
+function friction(value: any) {
 	const MAX_FRICTION = 5;
 	const MAX_VALUE = 100;
 	return max(
@@ -72,7 +68,7 @@ function friction(value) {
 	);
 }
 
-function speed(value) {
+function speed(value: any) {
 	const clock = new Clock();
 	const dt = diff(clock);
 	return cond(lessThan(dt, 1), 0, multiply(1000, divide(diff(value), dt)));
@@ -81,7 +77,7 @@ function speed(value) {
 const MIN_SCALE = 1;
 const MAX_SCALE = 2;
 
-function scaleRest(value) {
+function scaleRest(value: any) {
 	return cond(
 		lessThan(value, MIN_SCALE),
 		MIN_SCALE,
@@ -89,7 +85,7 @@ function scaleRest(value) {
 	);
 }
 
-function scaleFriction(value, rest, delta) {
+function scaleFriction(value: any, rest: any, delta: any) {
 	const MAX_FRICTION = 20;
 	const MAX_VALUE = 0.5;
 	const res = multiply(value, delta);
@@ -105,7 +101,7 @@ function scaleFriction(value, rest, delta) {
 	);
 }
 
-function runTiming(clock, value, dest, startStopClock = true) {
+function runTiming(clock: any, value: any, dest: any, startStopClock: any = true) {
 	const state = {
 		finished: new Value(0),
 		position: new Value(0),
@@ -134,7 +130,7 @@ function runTiming(clock, value, dest, startStopClock = true) {
 	];
 }
 
-function runDecay(clock, value, velocity) {
+function runDecay(clock: any, value: any, velocity: any) {
 	const state = {
 		finished: new Value(0),
 		velocity: new Value(0),
@@ -160,13 +156,13 @@ function runDecay(clock, value, velocity) {
 }
 
 function bouncyPinch(
-	value,
+	value: any,
-	gesture,
+	gesture: any,
-	gestureActive,
+	gestureActive: any,
-	focalX,
+	focalX: any,
-	displacementX,
+	displacementX: any,
-	focalY,
+	focalY: any,
-	displacementY
+	displacementY: any
 ) {
 	const clock = new Clock();
 
@@ -212,12 +208,12 @@ function bouncyPinch(
 }
 
 function bouncy(
-	value,
+	value: any,
-	gestureDiv,
+	gestureDiv: any,
-	gestureActive,
+	gestureActive: any,
-	lowerBound,
+	lowerBound: any,
-	upperBound,
+	upperBound: any,
-	f
+	f: any
 ) {
 	const timingClock = new Clock();
 	const decayClock = new Clock();
@@ -266,7 +262,7 @@ class Image extends React.PureComponent {
 	}
 
 	render() {
-		const { imageComponentType } = this.props;
+		const { imageComponentType }: any = this.props;
 
 		const Component = ImageComponent(imageComponentType);
 
@@ -277,16 +273,25 @@ const AnimatedImage = Animated.createAnimatedComponent(Image);
 
 // it was picked from https://github.com/software-mansion/react-native-reanimated/tree/master/Example/imageViewer
 // and changed to use FastImage animated component
-export class ImageViewer extends React.Component {
-	static propTypes = {
-		uri: PropTypes.string,
-		width: PropTypes.number,
-		height: PropTypes.number,
-		theme: PropTypes.string,
-		imageComponentType: PropTypes.string
-	}
 
-	constructor(props) {
+interface IImageViewerProps {
+	uri: string;
+	width: number;
+	height: number;
+	theme: string;
+	imageComponentType: string;
+}
+
+export class ImageViewer extends React.Component<IImageViewerProps, any> {
+	private _onPinchEvent: any;
+	private _focalDisplacementX: any;
+	private _focalDisplacementY: any;
+	private _scale: any;
+	private _onPanEvent: any;
+	private _panTransX: any;
+	private _panTransY: any;
+
+	constructor(props: IImageViewerProps) {
 		super(props);
 
 		// DECLARE TRANSX
@@ -351,7 +356,7 @@ export class ImageViewer extends React.Component {
 		]);
 
 		const panActive = eq(panState, State.ACTIVE);
-		const panFriction = value => friction(value);
+		const panFriction = (value: any) => friction(value);
 
 		// X
 		const panUpX = cond(

app/presentation/ImageViewer/ImageViewer.ios.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { ImageComponent } from './ImageComponent';
 import { themes } from '../../constants/colors';
@@ -15,12 +14,21 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IImageViewer {
+	uri: string;
+	imageComponentType: string;
+	width: number;
+	height: number;
+	theme: string;
+}
+
 export const ImageViewer = ({
 	uri, imageComponentType, theme, width, height, ...props
-}) => {
+}: IImageViewer) => {
 	const backgroundColor = themes[theme].previewBackground;
 	const Component = ImageComponent(imageComponentType);
 	return (
+		// @ts-ignore
 		<ScrollView
 			style={{ backgroundColor }}
 			contentContainerStyle={[
@@ -41,11 +49,3 @@ export const ImageViewer = ({
 		</ScrollView>
 	);
 };
-
-ImageViewer.propTypes = {
-	uri: PropTypes.string,
-	imageComponentType: PropTypes.string,
-	width: PropTypes.number,
-	height: PropTypes.number,
-	theme: PropTypes.string
-};