Chore: Migrate containers/Toast to hooks (#4309)

app/containers/Toast.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 import EasyToast from 'react-native-easy-toast';
 
-import { themes } from '../lib/constants';
-import sharedStyles from '../views/Styles';
 import EventEmitter from '../lib/methods/helpers/events';
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
+import sharedStyles from '../views/Styles';
 
 const styles = StyleSheet.create({
 	toast: {
@@ -21,54 +20,37 @@ const styles = StyleSheet.create({
 
 export const LISTENER = 'Toast';
 
-interface IToastProps {
+let listener: Function;
-	theme?: TSupportedThemes;
+let toast: EasyToast | null | undefined;
-}
 
-class Toast extends React.Component<IToastProps, any> {
+const Toast = (): React.ReactElement => {
-	private listener?: Function;
+	const { colors } = useTheme();
 
-	private toast: EasyToast | null | undefined;
+	useEffect(() => {
+		listener = EventEmitter.addEventListener(LISTENER, showToast);
+		return () => {
+			EventEmitter.removeListener(LISTENER, listener);
+		};
+	}, []);
 
-	componentDidMount() {
+	const getToastRef = (newToast: EasyToast | null) => (toast = newToast);
-		this.listener = EventEmitter.addEventListener(LISTENER, this.showToast);
-	}
 
-	shouldComponentUpdate(nextProps: any) {
+	const showToast = ({ message }: { message: string }) => {
-		const { theme } = this.props;
+		if (toast && toast.show) {
-		if (nextProps.theme !== theme) {
+			toast.show(message, 1000);
-			return true;
-		}
-		return false;
-	}
-
-	componentWillUnmount() {
-		if (this.listener) {
-			EventEmitter.removeListener(LISTENER, this.listener);
-		}
-	}
-
-	getToastRef = (toast: EasyToast | null) => (this.toast = toast);
-
-	showToast = ({ message }: { message: string }) => {
-		if (this.toast && this.toast.show) {
-			this.toast.show(message, 1000);
 		}
 	};
 
-	render() {
+	return (
-		const { theme } = this.props;
+		<EasyToast
-		return (
+			ref={getToastRef}
-			<EasyToast
+			// @ts-ignore
-				ref={this.getToastRef}
+			position='center'
-				// @ts-ignore
+			style={[styles.toast, { backgroundColor: colors.toastBackground }]}
-				position='center'
+			textStyle={[styles.text, { color: colors.buttonText }]}
-				style={[styles.toast, { backgroundColor: themes[theme!].toastBackground }]}
+			opacity={0.9}
-				textStyle={[styles.text, { color: themes[theme!].buttonText }]}
+		/>
-				opacity={0.9}
+	);
-			/>
+};
-		);
-	}
-}
 
-export default withTheme(Toast);
+export default Toast;