How to add the blur effect with React Native?

Sometimes, we want to add the blur effect with React Native.

In this article, we’ll look at how to add the blur effect with React Native.

How to add the blur effect with React Native?

To add the blur effect with React Native, we can set the blurRadius of the Image.

For instance, we write:

import * as React from 'react';
import { View, Image } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View>
      <Image
        resizeMode="cover"
        source="https://picsum.photos/200/300"
        blurRadius={6}
        style={{ width: 200, height: 300 }}
      />
    </View>
  );
}

to add the Image component to add an image.

Then we set the blurRadius prop to a positive number to add the blur effect.

Conclusion

To add the blur effect with React Native, we can set the blurRadius of the Image.