React Native overlay with fadein and fadeout animations. Can be used as a blocker when content is being loaded

Blocker.js

import React from 'react';
import { ActivityIndicator, Animated, View } from 'react-native';

/**
 * <Blocker active={this.state.loading}>
 * 	 Content goes here...
 * </Blocker>
 * 
 */
export class Blocker extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			fadeAnim: new Animated.Value(0),
			rerender: false
		}
	}

	componentDidMount() {
		this.fadeIn();
	}

	fadeIn() {
		Animated.timing(
			this.state.fadeAnim,
			{
				toValue: 1,
				duration: 300
			}
		).start();
	}

	fadeOut() {
		Animated.timing(
			this.state.fadeAnim,
			{
				toValue: 0,
				duration: 300
			}
		).start(() => {
			this.setState({
				rerender: true
			});
		});
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.active == false) {
			this.fadeOut();
		} else if (nextProps.active == true) {
			this.fadeIn();
		}
	}

	isInactiveAndInvisible() {
		return this.props.active === false && this.state.fadeAnim.__getValue() === 0;
	}

	isActiveAndVisible() {
		return !this.isInactiveAndInvisible();
	}

	render() {
		return (
			<View style={{ height: "100%", width: "100%" }}>
				{this.isActiveAndVisible() && this.renderAbsoluteOverlay()}
				{this.props.children}
			</View>
		);
	}

	renderAbsoluteOverlay() {
		return (
			<Animated.View
				style={{
					position: "absolute",
					bottom: 0,
					left: 0,
					right: 0,
					top: 0,
					zIndex: 10,
					justifyContent: "center",
					alignItems: "center",
					opacity: this.state.fadeAnim,
					backgroundColor: 'rgba(52, 52, 52, .8)'
				}}>
				<ActivityIndicator size="large" color="red" />
			</Animated.View>
		);
	}
}