This is React Native project, bootstrapped using @react-native-community/cli.

The project only aims to exemplify how to blur elements in a performant and creative way over images with bare React Native code.

If you require new features or bug fixes you can fork this project, but consider starring this repository and mention the credits.

The idea/concept behind this implementation is explained in my Medium profile.

Some usage examples (heavy file can take seconds to load):

Only ImageBlurView will be blurred

Full width blur

Full height blur

Full width / height blur

Multiple ImageBlurView

Multiple blur shapes

Custom blur props (blurRadius and overlay)

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

yarn start

Step 2: Start your Application

You can start the application by running:

# Metro Server
yarn start

# Android
yarn android

# iOS
yarn ios

Android performance test with Expo Go + Storybook