@evlop/react-native-community-blur-web

Web implementation of BlurView that is compatible with react-native-web. This package is intended to be used as the web build target for @react-native-community/blur:

https://www.npmjs.com/package/@react-native-community/blur

It approximates native blur using CSS backdrop-filter with a tint overlay and falls back to a non-blurred tint when backdrop-filter is not supported.

Install

npm i @evlop/react-native-community-blur-web
# or
yarn add @evlop/react-native-community-blur-web

Peer deps: react, react-dom. You also need react-native-web in your app.

Usage

Import BlurView in your app code as usual from @react-native-community/blur. Then, alias that module to this web package for web builds so the same import works cross‑platform.

import { BlurView } from '@react-native-community/blur';

export default function Example() {
  return (
    <BlurView blurType="light" blurAmount={16} style={{ borderRadius: 12 }}>
      <div style={{ padding: 16 }}>Content on blurred background</div>
    </BlurView>
  );
}

Configure Resolution (Web)

Pick the alias method that matches your tooling:

• Next.js (webpack): add an alias in next.config.js:

  // next.config.js
  const nextConfig = {
    webpack: (config) => {
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        ['@react-native-community/blur$']:
          '@evlop/react-native-community-blur-web',
      };
      return config;
    },
  };
  module.exports = nextConfig;

• Vite: add an alias in vite.config.ts:

  // vite.config.ts
  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@react-native-community/blur':
          '@evlop/react-native-community-blur-web',
      },
    },
  });

• Webpack (generic): add to resolve.alias:

  // webpack.config.js
  module.exports = {
    resolve: {
      alias: {
        '@react-native-community/blur':
          '@evlop/react-native-community-blur-web',
      },
    },
  };

If you prefer, you can import the web build directly in web‑only code:

import BlurView from '@evlop/react-native-community-blur-web';

Props

• blurType: 'xlight' | 'light' | 'regular' | 'prominent' | 'dark' | 'extralight' | 'extralarge' | 'extraDark' (aliases like x-light, extralight, etc. also accepted). Default: light.
• blurAmount: number in pixels. Default: 10.
• style: React.CSSProperties | Array<...>; border radius is respected and overflow is handled automatically.
• children: React nodes to render above the blur overlay.

Behavior & Limitations

• Uses CSS backdrop-filter; on unsupported browsers it falls back to a tinted overlay without blur.
• Applies tint color to approximate native UIVisualEffectView styles.
• Maintains border radii on the blur overlay and ensures content renders above it.

TypeScript

• Ships with dist/index.d.ts and exports BlurViewProps.

Build

• Source is in TypeScript. Build with:

  npm run build

License

ISC