DEV Community

Thiago Marinho
Thiago Marinho

Posted on

How to Add Blurred Text in React Native

If you're looking for a stylish way to hide certain information in your React Native app, adding blurred text can be a visually appealing solution. In this tutorial, I'll show you how to integrate blurred text into your components using React Native easily.

Step 1: Installation

Depending on your development environment, you may need to install the expo-blur package if you're using Expo or react-native-blur for standard React Native projects. You can do this by running the following command:



yarn add expo-blur


Enter fullscreen mode Exit fullscreen mode

or



yarn add react-native-blur
cd ios && pod-install



Enter fullscreen mode Exit fullscreen mode

Step 2: Creating the Component

Let's start by creating a component called Blurred. This component will accept two optional parameters: intensity and tint. You can use the following code:



import { ReactNode } from 'react'
import { BlurView } from 'expo-blur' // or 'react-native-blur' for React Native projects
import { View } from 'native-base'

type BlurredProps = {
  intensity?: number
  tint?: 'light' | 'dark'
  children: ReactNode
}

export const Blurred = ({ intensity = 8, tint = 'light', children }: BlurredProps) => {
  return (
    <View>
      {children}
      <BlurView
        intensity={intensity}
        tint={tint}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
        }}
      />
    </View>
  )
}



Enter fullscreen mode Exit fullscreen mode

Step 3: Adding it to Your Logic

Now, you can use the Blurred component in your logic as follows:



 const Promotion = () => {
  if (!userCanSeePromo) {
    return (
      <Blurred>
        <Typography variant='body1' color='gray.500'>
          {item.promo}
        </Typography>
      </Blurred>
    )
  }

  return (
    <Typography variant='body1' color='gray.500'>
      {item.full_price}
    </Typography>
  )
}



Enter fullscreen mode Exit fullscreen mode

Feel free to adjust the intensity and tint as needed. This will give you a visually appealing effect like the one shown in the image provided.

You will have something like this:

Image description

I used it three times in this card to hide some pieces of information.

You can use it with react-native or even with native-base ui. In my project, I'm using native-base and it works perfectly.

Conclusion

Adding blurred text to your React Native app can enhance its visual appeal and provide a modern touch to your UI. You can just experiment with different intensities and tints to achieve the desired effect in your application.

Top comments (2)

Collapse
 
tgmarinhodev profile image
Thiago Marinho

add the prop: experimentalBlurMethod for Android

BlurView on Android is an experimental feature. To enable it use the experimentalBlurMethod prop.

Collapse
 
kumala3 profile image
Kostek

Important notice! I was really confused why it doesn't work as expected, and then saw your comment! Thanks!