CODEWITHSUNDEEP
javascriptreactjsreact-native
Filip
Filip

Reputation: 945

How to make any child component blurred in react native?

There are many options on how to blur an image in react native, but I want to blur a View component (or any other component, for what it's worth), not an Image.

How could I do that?

Upvotes: 1

Views: 1219

Answers (1)

Mehran Khan
Mehran Khan

Reputation: 3636

You can use react-native-blur to make any View Blur in react native

Try this

import React, { Component } from "react";
import { View, Image, Text, findNodeHandle, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
  }

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

  render() {
    return (
      <View style={styles.container}>
        <Text>Hi, I am some unblurred text</Text>
        <BlurView
          style={styles.absolute}
          viewRef={this.state.viewRef}
          blurType="light"
          blurAmount={10}
        />
        <Image
          ref={img => {
            this.backgroundImage = img;
          }}
          source={{ uri }}
          style={styles.absolute}
          onLoadEnd={this.imageLoaded.bind(this)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  }
});

Upvotes: 2

Related Questions