sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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>
This commit is contained in:
Reinaldo Neto 2021-08-16 18:14:56 -03:00 committed by GitHub
parent 1c43c78cf4
commit 14fd12ce64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/containers/Loading.js
View File

@ -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));