React Native Blur Effect

A lightweight blur effect component for React Native that avoids conflicts with React Navigation.

Installation

npm install react-native-blur-effect
# or
yarn add react-native-blur-effect

For iOS, run:

cd ios && pod install

Usage

import BlurEffect from 'react-native-blur-effect';

const App = () => {
  return (
    <BlurEffect
      blurType="light"
      blurAmount={10}
      style={{ flex: 1 }}
    >
      <Text>Content behind blur</Text>
    </BlurEffect>
  );
};

Props

• blurType: 'light' | 'dark' | 'regular' (default: 'regular')
• blurAmount: number (default: 10)
• style: ViewStyle
• children: React.ReactNode

Features

• ✅ No conflicts with React Navigation
• ✅ Native iOS blur effects
• ✅ Android compatible overlay
• ✅ TypeScript support
• ✅ Lightweight implementation