import React,{

Component,

PropTypes,

View,

StyleSheet,

Text,

Dimensions,

Animated

} from 'react-native';

import Spinner from './Spinner';

const { height, width } = Dimensions.get('window');

const toastWidth = width * 0.7;

class Loading extends Component {

static propTypes = {

show: PropTypes.bool

};

static defaultProps = {

show: false

};

constructor(props) {

super(props);

this.state = {

fadeAnim: new Animated.Value(0.4)

};

}

render() {

const opacity = {

opacity: this.state.fadeAnim

};

if (!this.props.show) return null;

return (

<Animated.View style={[styles.container, this.props.style, opacity]}>

<Spinner/>

</Animated.View>

)

}

}

const styles = StyleSheet.create({

container: {

position: 'absolute',

backgroundColor: 'rgba(0,0,0,0.8)',

borderRadius: 5,

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

width: toastWidth,

left: (width - toastWidth) / 2,

top: (height - 60) / 2,

padding: 20

},

text: {

flex: 1,

color: 'white',

fontSize: 16,

textAlign: 'center'

}

});

export default Loading;