Chore: Migrate containers/Loading to `reanimated` v2 and Hooks (#4073)

* Chore : Clean `Loading` component and migrate to reanimated v2

* Remove theme prop

* Use colors from useTheme and PixelRatio for image

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

app/containers/Loading.tsx

@@ -1,8 +1,17 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { Animated, Modal, StyleSheet, View } from 'react-native';
+import { Modal, StyleSheet, View, PixelRatio } from 'react-native';
+import Animated, {
+	cancelAnimation,
+	Extrapolate,
+	interpolate,
+	useAnimatedStyle,
+	useSharedValue,
+	withRepeat,
+	withSequence,
+	withTiming
+} from 'react-native-reanimated';
 
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
-import { themes } from '../lib/constants';
 
 const styles = StyleSheet.create({
 	container: {
@@ -11,130 +20,54 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	image: {
-		width: 100,
+		width: PixelRatio.get() * 40,
-		height: 100,
+		height: PixelRatio.get() * 40,
 		resizeMode: 'contain'
 	}
 });
 
 interface ILoadingProps {
 	visible: boolean;
-	theme?: TSupportedThemes;
 }
 
-interface ILoadingState {
+const Loading = ({ visible }: ILoadingProps): React.ReactElement => {
-	scale: Animated.Value;
+	const opacity = useSharedValue(0);
-	opacity: Animated.Value;
+	const scale = useSharedValue(1);
-}
+	const { colors } = useTheme();
-
-class Loading extends React.PureComponent<ILoadingProps, ILoadingState> {
-	state = {
-		scale: new Animated.Value(1),
-		opacity: new Animated.Value(0)
-	};
-
-	private opacityAnimation?: Animated.CompositeAnimation;
-
-	private scaleAnimation?: Animated.CompositeAnimation;
-
-	componentDidMount() {
-		const { opacity, scale } = this.state;
-		const { visible } = this.props;
-
-		this.opacityAnimation = Animated.timing(opacity, {
-			toValue: 1,
-			duration: 200,
-			useNativeDriver: true
-		});
-		this.scaleAnimation = Animated.loop(
-			Animated.sequence([
-				Animated.timing(scale, {
-					toValue: 0,
-					duration: 1000,
-					useNativeDriver: true
-				}),
-				Animated.timing(scale, {
-					toValue: 1,
-					duration: 1000,
-					useNativeDriver: true
-				})
-			])
-		);
 
+	useEffect(() => {
 		if (visible) {
-			this.startAnimations();
+			opacity.value = withTiming(1, {
+				duration: 200
+			});
+			scale.value = withRepeat(withSequence(withTiming(0, { duration: 1000 }), withTiming(1, { duration: 1000 })), -1);
 		}
-	}
+		return () => {
+			cancelAnimation(scale);
+		};
+	}, [opacity, scale, visible]);
 
-	componentDidUpdate(prevProps: ILoadingProps) {
+	const animatedOpacity = useAnimatedStyle(() => ({
-		const { visible } = this.props;
+		opacity: interpolate(opacity.value, [0, 1], [0, colors.backdropOpacity], Extrapolate.CLAMP)
-		if (visible && visible !== prevProps.visible) {
+	}));
-			this.startAnimations();
+	const animatedScale = useAnimatedStyle(() => ({ transform: [{ scale: interpolate(scale.value, [0, 0.5, 1], [1, 1.1, 1]) }] }));
-		}
-	}
 
-	componentWillUnmount() {
+	return (
-		if (this.opacityAnimation && this.opacityAnimation.stop) {
+		<Modal visible={visible} transparent onRequestClose={() => {}}>
-			this.opacityAnimation.stop();
+			<View style={styles.container} testID='loading'>
-		}
+				<Animated.View
-		if (this.scaleAnimation && this.scaleAnimation.stop) {
+					style={[
-			this.scaleAnimation.stop();
+						{
-		}
+							...StyleSheet.absoluteFillObject,
-	}
+							backgroundColor: colors.backdropColor
+						},
+						animatedOpacity
+					]}
+				/>
+				<Animated.Image source={require('../static/images/logo.png')} style={[styles.image, animatedScale]} />
+			</View>
+		</Modal>
+	);
+};
 
-	startAnimations() {
+export default Loading;
-		if (this.opacityAnimation && this.opacityAnimation.start) {
-			this.opacityAnimation.start();
-		}
-		if (this.scaleAnimation && this.scaleAnimation.start) {
-			this.scaleAnimation.start();
-		}
-	}
-
-	render() {
-		const { opacity, scale } = this.state;
-		const { visible, theme } = this.props;
-
-		const scaleAnimation = scale.interpolate({
-			inputRange: [0, 0.5, 1],
-			outputRange: [1, 1.1, 1]
-		});
-
-		const opacityAnimation = opacity.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, themes[theme!].backdropOpacity],
-			extrapolate: 'clamp'
-		});
-
-		return (
-			<Modal visible={visible} transparent onRequestClose={() => {}}>
-				<View style={styles.container} testID='loading'>
-					<Animated.View
-						style={[
-							{
-								...StyleSheet.absoluteFillObject,
-								backgroundColor: themes[theme!].backdropColor,
-								opacity: opacityAnimation
-							}
-						]}
-					/>
-					<Animated.Image
-						source={require('../static/images/logo.png')}
-						style={[
-							styles.image,
-							{
-								transform: [
-									{
-										scale: scaleAnimation
-									}
-								]
-							}
-						]}
-					/>
-				</View>
-			</Modal>
-		);
-	}
-}
-
-export default withTheme(Loading);

app/views/ShareView/index.tsx

@@ -361,7 +361,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
 				{this.renderContent()}
-				<Loading visible={loading} theme={theme} />
+				<Loading visible={loading} />
 			</SafeAreaView>
 		);
 	}