Make specific View / Text blur - React native

196 Views Asked by At

I want to make specific View blur in react native. I tried react-native-blur but it is creating a rectangle box while is not looking good in case of Text. Also the result is not good in case of android. Desired result - Text blurrness

blur text

The solution mentioned here did not help.

Do you think react-native-svg can help? As <Rect> will still create reactangle box.

import * as React from "react";
import Svg, { Defs, Rect } from "react-native-svg";

const SVGComponent = (props) => (
  <Svg height={110} width={210} {...props}>
    <Defs></Defs>
    <Rect
      width={90}
      height={40}
      stroke="black"
      strokeWidth={3}
      fill="grey"
      filter="url(#f1)"
    />
  </Svg>
);
export default SVGComponent;

SVGR has dropped filter which not supported by react-native-svg. So, I am unable to find solution using RN-SVG. If anyone has any solution please discuss.

0

There are 0 best solutions below