React Native Blurred Overlay

import React, { Component } from 'react';

import {
  Image,
  InteractionManager,
  StyleSheet,
  Switch,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  findNodeHandle,
} from 'react-native';

import { BlurView } from '@react-native-community/blur';

export default class Basic extends Component {
  constructor() {
    super();
    this.state = {
      showBlur: false,
      viewRef: null,
      blurType: 'light',
      blur_counter: 0,
      render_counter: 0,
    };
  }

  imageLoaded() {
    // Workaround for race condition on initial load
    InteractionManager.runAfterInteractions(() => {
      setTimeout(() => {
        this.setState({ viewRef: findNodeHandle(this.refs.backgroundView) });
      }, 500);
    });
  }

  setBackgroundXlight() {
    this.setState({
      blurType: 'xlight',
    });
  }
  setBackgroundLight() {
    this.setState({
      blurType: 'light',
    });
  }
  setBackgroundDark() {
    this.setState({
      blurType: 'dark',
    });
  }

  renderBlurView() {
    this.state.blur_counter++;
    //For the text color on change of the background
    const textColor = ['#ffffff', '#000000'];
    if (this.state.blurType === 'xlight') {textColor.reverse();}

    return (

      <View style={{flexDirection: 'column',justifyContent: 'flex-end',}}>
       {this.state.viewRef && <BlurView
          viewRef={this.state.viewRef}
          style={{position: 'absolute', left: 0, top: 0, bottom: 0, right: 0, zIndex:1, }}
          blurRadius={2}
          blurType={this.state.blurType}
          // downsampleFactor={10}
          // overlayColor={'rgba(0, 0, 255, .6)'}   // set a blue overlay
        />}
        <View style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-end',
          paddingBottom:32,
        }}>
          <Text style={[styles.text, { color: textColor[0] }]}>
            Blur component
          </Text>
          <TouchableOpacity
              style={styles.button}
              onPress={this.setBackgroundXlight.bind(this)}>
            <Text style={[styles.text, { color: textColor[0] }]}>xlight</Text>
          </TouchableOpacity>
          <TouchableOpacity
              style={styles.button}
              onPress={this.setBackgroundLight.bind(this)}>
            <Text style={[styles.text, { color: textColor[0] }]}>light</Text>
          </TouchableOpacity>
          <TouchableOpacity
              style={styles.button}
              onPress={this.setBackgroundDark.bind(this)}>
            <Text style={[styles.text, { color: textColor[0] }]}>dark</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  render() {
    this.state.render_counter++;
    const textColor = ['#ffffff', '#000000'];
    if (this.state.blurType === 'xlight') { textColor.reverse();}
    return (
      <View style={styles.outerContainer}>
        <View style={styles.innerContainer} ref={'backgroundView'}>
          <Image
            source={{uri: 'https://images.freeimages.com/images/large-previews/a0d/autumn-tree-1382832.jpg'}}
            style={styles.image}
            onLoadEnd={this.imageLoaded.bind(this)} />
          <View
            style={styles.blurSwitchView}>
            <Text style={[styles.text, { color: textColor[0] }]}>Show Blur Background : </Text>
            <Text style={[styles.text, { color: textColor[0] }]}>{this.state.showBlur ? "Yes" : "No"}</Text>
            <Text style={[styles.text, { color: textColor[0] }]}>Blur counter {this.state.blur_counter} Render counter {this.state.render_counter}</Text>
            <Switch
              onValueChange={(value) => this.setState({showBlur: value})}
              value={this.state.showBlur} />
          </View>
        </View>
        { this.state.showBlur ? this.renderBlurView() : null }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  innerContainer: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    position:'absolute',
    top:0,
    left:0,
    right:0,
    bottom:0,
    zIndex:0,
  },
  outerContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    position:'absolute',
    top:0,
    left:0,
    right:0,
    bottom:0,
  },
  image: {
    position: 'absolute',
    alignSelf:'stretch',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
    zIndex: 0,
  },
  text: {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    margin: 10,
    color:"#d0d0d0"
  },
  blurSwitchView: {
    position: 'absolute',
    top: 30,
    alignItems: 'center',
    zIndex: 1,
  },
  button: {
    alignItems: 'center',
    backgroundColor: 'lightgreen',
    width:250,
    marginLeft:100,
    marginRight:100,
    marginTop:16
  },
});