CODEWITHSUNDEEP
javascriptandroidiosreactjsreact-native
Jan D.M.
Jan D.M.

Reputation: 2674

How to blur text in React Native

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).

Upvotes: 4

Views: 11832

Answers (5)

indranil chakraborty
indranil chakraborty

Reputation: 1

          <Text
              style={
              textShadowColor: "rgba(0, 0, 0, 0.55)",
              textShadowOffset: { width: -1, height: 1 },
              textShadowRadius: 20,
              color:transparent
              }
              size="14px"
            >
              Your blurry text
          </Text>

Previous answer was using a div to cover up the content, but in many cases divs were visible and it was seen as workaround. In this case, we put shadow on the text and put transparent color on text to make it disappear

Upvotes: 0

Jeffrey Paul
Jeffrey Paul

Reputation: 21

Similar to the above replies, for iOS we can manipulate the text shadow to be visible and hide the actual text

const $shadowLyrics = {
  color: Colors.primary.solid,
  left: -2000,
  elevation: 2,
  backgroundColor: 'transparent',
  shadowOpacity: 1,
  shadowRadius: 4,
  shadowColor: 'rgba(255,255,255,1)',
  shadowOffset: { width: 2000, height: 0 },
}

This ensures that we hide the text component and only show the blur, i.e Here's a reference Imgage (you can play around with the width values to move the text away from reference)

However on Android, shadowOffset doesn't work as it does on iOS, but we can set the text colour to be transparent and the shadow to be the intended blur text colour (this doesn't work on iOS)

const $shadow = {
  color: "transparent",
  shadowOpacity: 1,
  textShadowRadius: 15,
  textShadowColor: 'rgba(255,255,255,1)'
}

Android reference image

Upvotes: 2

Rahul Shakya
Rahul Shakya

Reputation: 1425

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>

Upvotes: 4

Scott
Scott

Reputation: 1247

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)"
  }}
/>

Upvotes: 4

Karim soubai
Karim soubai

Reputation: 46

Install react-native-blur:

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...

Upvotes: 1

Related Questions