[IMPROVE] - migrating the last container files (in progress)

app/containers/Loading.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {
-	StyleSheet, View, Modal, Animated
-} from 'react-native';
+import { StyleSheet, View, Modal, Animated } from 'react-native';
 
 const styles = StyleSheet.create({
 	container: {
@@ -18,15 +15,18 @@ const styles = StyleSheet.create({
 	}
 });
 
-export default class Loading extends React.PureComponent {
-	static propTypes = {
-		visible: PropTypes.bool.isRequired
-	}
+interface ILoadingProps {
+	visible: boolean;
+}
+
+export default class Loading extends React.PureComponent<ILoadingProps, any> {
 
 	state = {
 		scale: new Animated.Value(1),
 		opacity: new Animated.Value(0)
 	}
+	private opacityAnimation: any;
+	private scaleAnimation: any;
 
 	componentDidMount() {
 		const { opacity, scale } = this.state;
@@ -64,7 +64,7 @@ export default class Loading extends React.PureComponent {
 		}
 	}
 
-	componentDidUpdate(prevProps) {
+	componentDidUpdate(prevProps: any) {
 		const { visible } = this.props;
 		if (visible && visible !== prevProps.visible) {
 			this.startAnimations();

app/containers/OrSeparator.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import I18n from '../i18n';
 import sharedStyles from '../views/Styles';
@@ -24,20 +23,22 @@ const styles = StyleSheet.create({
 	}
 });
 
-const OrSeparator = React.memo(({ theme }) => {
+interface IOrSeparator {
+	theme: string
+}
+
+const OrSeparator = React.memo(({ theme }: IOrSeparator) => {
 	const line = { backgroundColor: themes[theme].borderColor };
 	const text = { color: themes[theme].auxiliaryText };
 	return (
 		<View style={styles.container}>
 			<View style={[styles.line, line]} />
+			{/*TODO - see if this line is wrong, probably the correct is styles.text.marginRight*/}
+			{/*@ts-ignore*/}
 			<Text style={[styles.text, styles.marginRight, styles.marginLeft, text]}>{I18n.t('OR')}</Text>
 			<View style={[styles.line, line]} />
 		</View>
 	);
 });
 
-OrSeparator.propTypes = {
-	theme: PropTypes.string
-};
-
 export default OrSeparator;

app/containers/RoomTypeIcon.tsx

@@ -12,9 +12,19 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IRoomTypeIcon {
+	theme: string;
+	type: string;
+	isGroupChat: boolean;
+	teamMain: boolean;
+	status: string;
+	size: number;
+	style: any;
+}
+
 const RoomTypeIcon = React.memo(({
 	type, size, isGroupChat, status, style, theme, teamMain
-}) => {
+}: IRoomTypeIcon) => {
 	if (!type) {
 		return null;
 	}
@@ -57,18 +67,4 @@ const RoomTypeIcon = React.memo(({
 	);
 });
 
-RoomTypeIcon.propTypes = {
-	theme: PropTypes.string,
-	type: PropTypes.string,
-	isGroupChat: PropTypes.bool,
-	teamMain: PropTypes.bool,
-	status: PropTypes.string,
-	size: PropTypes.number,
-	style: PropTypes.object
-};
-
-RoomTypeIcon.defaultProps = {
-	size: 16
-};
-
 export default withTheme(RoomTypeIcon);

app/containers/SafeAreaView.tsx

@@ -11,9 +11,17 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface ISafeAreaView {
+	testID: string;
+	theme: string;
+	vertical: boolean;
+	style: object;
+	children: JSX.Element;
+}
+
 const SafeAreaView = React.memo(({
 	style, children, testID, theme, vertical = true, ...props
-}) => (
+}: ISafeAreaView) => (
 	<SafeAreaContext
 		style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
 		edges={vertical ? ['right', 'left'] : undefined}
@@ -24,12 +32,4 @@ const SafeAreaView = React.memo(({
 	</SafeAreaContext>
 ));
 
-SafeAreaView.propTypes = {
-	testID: PropTypes.string,
-	theme: PropTypes.string,
-	vertical: PropTypes.bool,
-	style: PropTypes.object,
-	children: PropTypes.element
-};
-
 export default withTheme(SafeAreaView);

app/containers/StatusBar.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import { StatusBar as StatusBarRN } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
 
-const StatusBar = React.memo(({ theme, barStyle, backgroundColor }) => {
+interface IStatusBar {
+	theme: string;
+	barStyle: any;
+	backgroundColor: string;
+}
+
+const StatusBar = React.memo(({ theme, barStyle, backgroundColor }: IStatusBar) => {
 	if (!barStyle) {
 		barStyle = 'light-content';
 		if (theme === 'light') {
@@ -15,10 +20,4 @@ const StatusBar = React.memo(({ theme, barStyle, backgroundColor }) => {
 	return <StatusBarRN backgroundColor={backgroundColor ?? themes[theme].headerBackground} barStyle={barStyle} animated />;
 });
 
-StatusBar.propTypes = {
-	theme: PropTypes.string,
-	barStyle: PropTypes.string,
-	backgroundColor: PropTypes.string
-};
-
 export default withTheme(StatusBar);

app/containers/TextInput.tsx

@@ -51,29 +51,27 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IRCTextInputProps {
+	label: string;
+	error: {
+		error: any;
+		reason: any;
+	};
+	loading: boolean;
+	secureTextEntry: boolean;
+	containerStyle: any;
+	inputStyle: object;
+	inputRef: any;
+	testID: string;
+	iconLeft: string;
+	iconRight: string;
+	placeholder: string;
+	left: JSX.Element;
+	onIconRightPress(): void;
+	theme: string;
+}
 
-export default class RCTextInput extends React.PureComponent {
-	static propTypes = {
-		label: PropTypes.string,
-		error: PropTypes.object,
-		loading: PropTypes.bool,
-		secureTextEntry: PropTypes.bool,
-		containerStyle: PropTypes.any,
-		inputStyle: PropTypes.object,
-		inputRef: PropTypes.func,
-		testID: PropTypes.string,
-		iconLeft: PropTypes.string,
-		iconRight: PropTypes.string,
-		placeholder: PropTypes.string,
-		left: PropTypes.element,
-		onIconRightPress: PropTypes.func,
-		theme: PropTypes.string
-	}
-
-	static defaultProps = {
-		error: {},
-		theme: 'light'
-	}
+export default class RCTextInput extends React.PureComponent<IRCTextInputProps, any> {
 
 	state = {
 		showPassword: false
@@ -121,11 +119,12 @@ export default class RCTextInput extends React.PureComponent {
 
 	get loading() {
 		const { theme } = this.props;
+		// @ts-ignore
 		return <ActivityIndicator style={[styles.iconContainer, styles.iconRight, { color: themes[theme].bodyText }]} />;
 	}
 
 	tooglePassword = () => {
-		this.setState(prevState => ({ showPassword: !prevState.showPassword }));
+		this.setState((prevState: any) => ({ showPassword: !prevState.showPassword }));
 	}
 
 	render() {
@@ -139,6 +138,7 @@ export default class RCTextInput extends React.PureComponent {
 				{label ? (
 					<Text
 						contentDescription={null}
+						// @ts-ignore
 						accessibilityLabel={null}
 						style={[
 							styles.label,
@@ -151,6 +151,7 @@ export default class RCTextInput extends React.PureComponent {
 				) : null}
 				<View style={styles.wrap}>
 					<TextInput
+						/*@ts-ignore*/
 						style={[
 							styles.input,
 							iconLeft && styles.inputIconLeft,

app/containers/ThreadDetails.tsx

@@ -40,6 +40,21 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IThreadDetails {
+	item: {
+		tcount: number | string;
+		replies: any;
+		id: string;
+	};
+	user: {
+		id: string
+	};
+	badgeColor: string;
+	toggleFollowThread: Function;
+	style: object;
+	theme: string;
+}
+
 const ThreadDetails = ({
 	item,
 	user,
@@ -47,7 +62,7 @@ const ThreadDetails = ({
 	toggleFollowThread,
 	style,
 	theme
-}) => {
+}: IThreadDetails) => {
 	let { tcount } = item;
 	if (tcount >= 1000) {
 		tcount = '+999';
@@ -62,7 +77,7 @@ const ThreadDetails = ({
 		replies = '+99';
 	}
 
-	const isFollowing = item.replies?.find(u => u === user?.id);
+	const isFollowing = item.replies?.find((u: any) => u === user?.id);
 
 	return (
 		<View style={[styles.container, style]}>
@@ -91,13 +106,5 @@ const ThreadDetails = ({
 		</View>
 	);
 };
-ThreadDetails.propTypes = {
-	item: PropTypes.object,
-	user: PropTypes.object,
-	badgeColor: PropTypes.string,
-	toggleFollowThread: PropTypes.func,
-	style: PropTypes.object,
-	theme: PropTypes.string
-};
 
 export default withTheme(ThreadDetails);

app/containers/Toast.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import EasyToast from 'react-native-easy-toast';
-import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
@@ -22,16 +21,19 @@ const styles = StyleSheet.create({
 
 export const LISTENER = 'Toast';
 
-class Toast extends React.Component {
-	static propTypes = {
-		theme: PropTypes.string
-	}
+interface IToastProps {
+	theme: string;
+}
+
+class Toast extends React.Component<IToastProps, any> {
+	private listener: any;
+	private toast: any;
 
 	componentDidMount() {
 		this.listener = EventEmitter.addEventListener(LISTENER, this.showToast);
 	}
 
-	shouldComponentUpdate(nextProps) {
+	shouldComponentUpdate(nextProps: any) {
 		const { theme } = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
@@ -43,9 +45,9 @@ class Toast extends React.Component {
 		EventEmitter.removeListener(LISTENER, this.listener);
 	}
 
-	getToastRef = toast => this.toast = toast;
+	getToastRef = (toast: any) => this.toast = toast;
 
-	showToast = ({ message }) => {
+	showToast = ({ message }: any) => {
 		if (this.toast && this.toast.show) {
 			this.toast.show(message, 1000);
 		}
@@ -56,6 +58,7 @@ class Toast extends React.Component {
 		return (
 			<EasyToast
 				ref={this.getToastRef}
+				// @ts-ignore
 				position='center'
 				style={[styles.toast, { backgroundColor: themes[theme].toastBackground }]}
 				textStyle={[styles.text, { color: themes[theme].buttonText }]}