React-native-blur: [Android] Can someone show an example of blurring something that's NOT an <Image />?

[booboothefool]

The example works great e.g.:

class LockAndroid extends Component {
  constructor() {
    super();

    this.state = {
      viewRef: 0,
    };
  }

  imageLoaded() {
  this.setState({viewRef: findNodeHandle(this.refs.backgroundImage)})
}

  render() {
    return (
      <Image
        source={require('./assets/filmstrip-heart.png')}
        style={styles.container}
        ref={'backgroundImage'}
        onLoadEnd={this.imageLoaded.bind(this)}>
        <BlurView
          blurRadius={15}
          downsampleFactor={5}
          overlayColor={'rgba(255, 255, 255, .25)'}
          style={styles.blurView}
          viewRef={this.state.viewRef}/>
        <Text style={styles.welcome}>{`Blur component`}</Text>
      </Image>
    );
  }
}

but I cannot seem to figure out how to blur something that's NOT an <Image />.

When I try something like this to use a <View />:

class LockAndroid extends Component {
  constructor() {
    super();

    this.state = {
      viewRef: 0,
    };
  }

  onLayout() {
    this.setState({viewRef: findNodeHandle(this.refs.backgroundView)})
  }

  render() {
    return (
      <View
        style={styles.container}
        ref={'backgroundView'}
        onLayout={this.onLayout.bind(this)}>
        <BlurView
          blurRadius={15}
          downsampleFactor={5}
          overlayColor={'rgba(255, 255, 255, .25)'}
          style={styles.blurView}
          viewRef={this.state.viewRef}/>
        <Text style={styles.welcome}>{`Blur component`}</Text>
      </View>
    );
  }
}

It just crashes...

What is the proper onLoadEnd equivalent for a <View />? I also tried setting viewRef in componentDidMount, but didn't work either. It may also even be a styling issue.

Just need a good example! Thanks.

[ericwooley]

This worked for me. Mostly taken from the example/base folder.

class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.state = { viewRef: null };
    }
    render() {
        return (
            <View style={styles.container}>
                <View
                    ref="backgroundWrapper"
                    style={[styles.absolute]}
                    onLayout={
                        Platform.select({
                            ios: () => this.setState({ viewRef: findNodeHandle(this.refs.backgroundWrapper) }),
                            android: () => InteractionManager.runAfterInteractions(() => setTimeout(() =>
                                this.setState({ viewRef: findNodeHandle(this.refs.backgroundWrapper) }), 20))
                        })
                    }
                >
                    {this.props.children}
                </View>
                {(this.state.viewRef || Platform.OS === "ios") &&
                <BlurView
                    style={[styles.absolute]}
                    viewRef={this.state.viewRef}
                    blurType="dark"
                    {...Platform.select({
                        ios: {
                            blurAmount: 3,
                            blurType: "dark"
                        },
                        android: {
                            // blurAmount: 31,
                            blurRadius: 9,
                            downsampleFactor: 9,
                        }
                    })}
                />}
                <View><Text>MainContent</Text></View>
            </View>
        );
    }
}