From 14fd12ce64405fe36e37a1c3adaf04c8c3b048b0 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Mon, 16 Aug 2021 18:14:56 -0300
Subject: [PATCH] [FIX] Hardcoded backdrop opacity on loading component (#3255)

* Added withTheme and themes to Loading

* Added animation to backdrop opacity

* Minor tweak

* Fix internal image impacted by opacity

Co-authored-by: Diego Mello <diegolmello@gmail.com>
Co-authored-by: Levy Costa <levycosta471@gmail.com>
---
 app/containers/Loading.js | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/containers/Loading.js b/app/containers/Loading.js
index 656e476af..76ca8a3f2 100644
--- a/app/containers/Loading.js
+++ b/app/containers/Loading.js
@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	StyleSheet, View, Modal, Animated
+	StyleSheet, Modal, Animated, View
 } from 'react-native';
+import { withTheme } from '../theme';
+import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		alignItems: 'center',
-		justifyContent: 'center',
-		backgroundColor: 'rgba(0, 0, 0, 0.25)'
+		justifyContent: 'center'
 	},
 	image: {
 		width: 100,
@@ -18,9 +19,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-export default class Loading extends React.PureComponent {
+class Loading extends React.PureComponent {
 	static propTypes = {
-		visible: PropTypes.bool.isRequired
+		visible: PropTypes.bool,
+		theme: PropTypes.string
 	}
 
 	state = {
@@ -36,7 +38,7 @@ export default class Loading extends React.PureComponent {
 			opacity,
 			{
 				toValue: 1,
-				duration: 1000,
+				duration: 200,
 				useNativeDriver: true
 			}
 		);
@@ -91,23 +93,39 @@ export default class Loading extends React.PureComponent {
 
 	render() {
 		const { opacity, scale } = this.state;
-		const { visible } = this.props;
+		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'>
+				<View
+					style={styles.container}
+					testID='loading'
+				>
+					<Animated.View
+						style={[{
+							...StyleSheet.absoluteFill,
+							backgroundColor: themes[theme].backdropColor,
+							opacity: opacityAnimation
+						}]}
+					/>
 					<Animated.Image
 						source={require('../static/images/logo.png')}
 						style={[styles.image, {
-							opacity,
 							transform: [{
 								scale: scaleAnimation
 							}]
@@ -118,3 +136,5 @@ export default class Loading extends React.PureComponent {
 		);
 	}
 }
+
+export default (withTheme(Loading));