DEV Community

Thiago Marinho
Thiago Marinho

Posted on

5 1 1 1 1

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

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!

Image of Timescale

Timescale โ€“ the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay