[IMPROVE] keeping migrate some files and fix some lint errors

app/containers/AppVersion.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
@@ -21,14 +20,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const AppVersion = React.memo(({ theme }) => (
+const AppVersion = React.memo(({ theme }: {theme: string}) => (
 	<View style={styles.container}>
 		<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{I18n.t('Version_no', { version: '' })}<Text style={styles.bold}>{getReadableVersion}</Text></Text>
 	</View>
 ));
 
-AppVersion.propTypes = {
-	theme: PropTypes.string
-};
-
 export default AppVersion;

app/containers/Check.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { CustomIcon } from '../lib/Icons';
 import { themes } from '../constants/colors';
 
+type TCheck = {
+	style: object,
+	theme: string
+}
 const styles = StyleSheet.create({
 	icon: {
 		width: 22,
@@ -13,11 +16,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Check = React.memo(({ theme, style }) => <CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />);
+const Check = React.memo(({ theme, style }: TCheck) => <CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />);
-
-Check.propTypes = {
-	style: PropTypes.object,
-	theme: PropTypes.string
-};
 
 export default Check;

app/containers/FormContainer.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
@@ -11,27 +10,32 @@ import AppVersion from './AppVersion';
 import { isTablet } from '../utils/deviceInfo';
 import SafeAreaView from './SafeAreaView';
 
+interface IFormContainer {
+	theme: string;
+	testID: string;
+	children: JSX.Element;
+}
+
 const styles = StyleSheet.create({
 	scrollView: {
 		minHeight: '100%'
 	}
 });
 
-export const FormContainerInner = ({ children }) => (
+export const FormContainerInner = ({ children }: {children: JSX.Element}) => (
 	<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
 		{children}
 	</View>
 );
 
-const FormContainer = ({
+const FormContainer = ({ children, theme, testID, ...props }: IFormContainer) => (
-	children, theme, testID, ...props
-}) => (
 	<KeyboardView
 		style={{ backgroundColor: themes[theme].backgroundColor }}
 		contentContainerStyle={sharedStyles.container}
 		keyboardVerticalOffset={128}
 	>
 		<StatusBar />
+		{/*@ts-ignore*/}
 		<ScrollView
 			style={sharedStyles.container}
 			contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
@@ -46,14 +50,4 @@ const FormContainer = ({
 	</KeyboardView>
 );
 
-FormContainer.propTypes = {
-	theme: PropTypes.string,
-	testID: PropTypes.string,
-	children: PropTypes.element
-};
-
-FormContainerInner.propTypes = {
-	children: PropTypes.element
-};
-
 export default FormContainer;

app/containers/Header/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { View, StyleSheet } from 'react-native';
 import { themes } from '../../constants/colors';
@@ -10,7 +9,7 @@ import { withTheme } from '../../theme';
 // Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69
 export const headerHeight = isIOS ? 44 : 56;
 
-export const getHeaderHeight = (isLandscape) => {
+export const getHeaderHeight = (isLandscape: boolean) => {
 	if (isIOS) {
 		if (isLandscape && !isTablet) {
 			return 32;
@@ -21,7 +20,15 @@ export const getHeaderHeight = (isLandscape) => {
 	return 56;
 };
 
-export const getHeaderTitlePosition = ({ insets, numIconsRight }) => ({
+type THeaderTitlePosition = {
+	insets: {
+		left: number;
+		right: number;
+	};
+	numIconsRight: number;
+}
+
+export const getHeaderTitlePosition = ({ insets, numIconsRight }: THeaderTitlePosition) => ({
 	left: insets.left + 60,
 	right: insets.right + Math.max(45 * numIconsRight, 15)
 });
@@ -35,9 +42,14 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Header = ({
+interface IHeader {
-	theme, headerLeft, headerTitle, headerRight
+	theme: string;
-}) => (
+	headerLeft(): void;
+	headerTitle(): void;
+	headerRight(): void;
+}
+
+const Header = ({ theme, headerLeft, headerTitle, headerRight }: IHeader) => (
 	<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
 		<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
 			{headerLeft ? headerLeft() : null}
@@ -47,11 +59,4 @@ const Header = ({
 	</SafeAreaView>
 );
 
-Header.propTypes = {
-	theme: PropTypes.string,
-	headerLeft: PropTypes.element,
-	headerTitle: PropTypes.element,
-	headerRight: PropTypes.element
-};
-
 export default withTheme(Header);

app/containers/InAppNotification/NotifierComponent.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
-import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
 import { connect } from 'react-redux';
 import { Notifier } from 'react-native-notifier';
@@ -16,10 +15,13 @@ import { goRoom } from '../../utils/goRoom';
 import Navigation from '../../lib/Navigation';
 import { useOrientation } from '../../dimensions';
 
+interface INotifierComponent {
+	notification: object;
+	isMasterDetail: boolean;
+}
+
 const AVATAR_SIZE = 48;
-const BUTTON_HIT_SLOP = {
+const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
-	top: 12, right: 12, bottom: 12, left: 12
-};
 
 const styles = StyleSheet.create({
 	container: {
@@ -64,16 +66,16 @@ const styles = StyleSheet.create({
 
 const hideNotification = () => Notifier.hideNotification();
 
-const NotifierComponent = React.memo(({ notification, isMasterDetail }) => {
+const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifierComponent) => {
-	const { theme } = useTheme();
+	const { theme }: any = useTheme();
 	const insets = useSafeAreaInsets();
 	const { isLandscape } = useOrientation();
 
-	const { text, payload } = notification;
+	const { text, payload }: any = notification;
 	const { type, rid } = payload;
 	const name = type === 'd' ? payload.sender.username : payload.name;
 	// if sub is not on local database, title and avatar will be null, so we use payload from notification
-	const { title = name, avatar = name } = notification;
+	const { title = name, avatar = name }: any = notification;
 
 	const onPress = () => {
 		const { prid, _id } = payload;
@@ -129,12 +131,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }) => {
 	);
 });
 
-NotifierComponent.propTypes = {
+const mapStateToProps = (state: any) => ({
-	notification: PropTypes.object,
-	isMasterDetail: PropTypes.bool
-};
-
-const mapStateToProps = state => ({
 	isMasterDetail: state.app.isMasterDetail
 });
 

app/containers/InAppNotification/index.tsx

@@ -1,5 +1,4 @@
 import React, { memo, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { NotifierRoot, Notifier, Easing } from 'react-native-notifier';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
@@ -11,8 +10,8 @@ import { getActiveRoute } from '../../utils/navigation';
 
 export const INAPP_NOTIFICATION_EMITTER = 'NotificationInApp';
 
-const InAppNotification = memo(({ rooms, appState }) => {
+const InAppNotification = memo(({ rooms, appState }: {rooms: any, appState: string}) => {
-	const show = (notification) => {
+	const show = (notification: any) => {
 		if (appState !== 'foreground') {
 			return;
 		}
@@ -44,14 +43,9 @@ const InAppNotification = memo(({ rooms, appState }) => {
 	return <NotifierRoot />;
 }, (prevProps, nextProps) => dequal(prevProps.rooms, nextProps.rooms));
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	rooms: state.room.rooms,
 	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background'
 });
 
-InAppNotification.propTypes = {
-	rooms: PropTypes.array,
-	appState: PropTypes.string
-};
-
 export default connect(mapStateToProps)(InAppNotification);

app/lib/Navigation.ts

@@ -4,7 +4,7 @@ import { CommonActions, StackActions, NavigationContainerRef } from '@react-navi
 const navigationRef = React.createRef<NavigationContainerRef>();
 const routeNameRef: React.MutableRefObject<NavigationContainerRef | null> = React.createRef();
 
-function navigate(name: string, params: any) {
+function navigate(name: string, params?: any) {
 	navigationRef.current?.navigate(name, params);
 }