2

The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially. The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".

How can we blur a Text component in React Native?

Info: I just want to make an app where the user does not see the answer directly (via blurring).

Jan D.M.
  • 2,284
  • 2
  • 20
  • 32
  • `react-native-blur` should work as long as you use the `viewRef` prop and reference your `Text` component with it – Zaytri Mar 29 '19 at 17:40
  • Perhaps you can try putting a transparent image on the text and adjusting the `blurRadius` prop? I cannot test it now, so it's just a guess. – LonelyCpp Mar 29 '19 at 18:06
  • i think you can animate the text in textInput. – Mortada Mar 29 '19 at 20:26

3 Answers3

3

If you don't want to install react-native-blur / expo-blur or it's not working for you, this is a workaround/hack that mimics the look of blurred text in a View. The values can be adjusted as necessary.

<View
  style={{
    height: 3,
    width: 70,
    shadowOpacity: 1,
    shadowColor: '#000',
    shadowOffset: { width: 10, height: 10 },
    shadowRadius: 5,
    elevation: 5,
    borderWidth: 0.5,
    borderColor: "white",
    backgroundColor: "rgba(255, 255, 255, 1)"
  }}
/>
Scott
  • 1,207
  • 2
  • 15
  • 38
  • seems like this is limited to fixed height and width. any idea how to make it work to dynamic width/height of child component? – Damian Aug 11 '23 at 01:47
2

You can simply use css to do it, feel free you change the amount of opacity, offset, color, radius as your requirement

        <Text
          style={{
            color: "#fff0",
            textShadowColor: "rgba(255,255,255,0.8)",
            textShadowOffset: {
              width: 0,
              height: 0,
            },
            textShadowRadius: 10,
            fontSize: 14,
            fontWeight: "600",
            textTransform: "capitalize",
          }}
        >
         Blurred

        </Text>
Rahul Shakya
  • 1,269
  • 15
  • 15
1

Install react-native-blur:

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...
Karim soubai
  • 46
  • 5