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

or

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

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

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

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:

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.

Comments

[Thiago Marinho]

add the prop: experimentalBlurMethod for Android

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

[Kostek]

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