CODEWITHSUNDEEP
react-nativeblurreact-native-blur
Yossi
Yossi

Reputation: 6027

Is it possible to set the blurred item to be totally white in react-native

Using react-native-blur / react-native-community/blur, is it possible to set the blurred item to be white?

I tried the following but it isn't totally white:

<BlurView
   blurType={'xlight'}
   blurAmount={100}
/>

Upvotes: 0

Views: 618

Answers (2)

NULL pointer
NULL pointer

Reputation: 1377

If you want it to be TOTALLY white, then why mnot just set the background color to white and do not use a blur at all?

Upvotes: 0

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Use react-native-blur and create blur component like

// components/Blur.js
import React, { Component } from "react";
import { Animated, View, Platform, Easing, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";
import PropTypes from "prop-types";
import styles from "./styles";

export default class Blur extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnimation: new Animated.Value(0),
    };
  }

  static propTypes = {
    title: PropTypes.string.isRequired,
  };

  fadeIn = () => {
    Animated.timing(this.state.fadeAnimation, {
      toValue: 1,
      duration: 3000,
    }).start();
  };

  fadeOut = () => {
    Animated.timing(this.state.fadeAnimation, {
      toValue: 0,
      duration: 3000,
    }).start();
  };

  componentDidMount() {
    this.fadeIn();
  }

  render() {
    return (
      <BlurView
        style={styles.blur}
        blurType="light"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
    );
  }
}

const styles = StyleSheet.create({
  blur: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    justifyContent: "center",
    backgroundColor: "rgba(100,100,100, 0.5)",
    padding: 20,
  },
});

Usage in screen like

import { Blur } from "../components";

export default class App extends Component {

  render() {
    return (
      <View style={{flex:1}}>
         <!-- Render views which should be blur -->
         <View>
             .....
         </View>

         <!-- render blur view in the end -->
         <Blur />

      </View>
    );
  }
}

Upvotes: 1

Related Questions