react-native-ios-glur

React Native wrapper for Glur - a SwiftUI library that provides efficient progressive blur effects using Metal.

Features

• 🎨 Progressive blur effects with customizable parameters
• ⚡ Efficient Metal-based rendering (iOS 17+)
• 📱 iOS-only native module
• 🎛️ Flexible configuration options

Installation

1. Install the package

npm install react-native-ios-glur
# or
yarn add react-native-ios-glur

2. Install iOS dependencies

cd ios && pod install && cd ..

That's it! The Glur source code is embedded in this package, so no additional Swift Package Manager setup is required.

Usage

import GlurView from 'react-native-ios-glur';

function App() {
  return (
    <GlurView
      radius={10}
      offset={0.2}
      interpolation={0.4}
      direction="down"
      noise={0.1}
      drawingGroup={true}
    >
      <Image source={require('./background.jpg')} />
      <Text>Blurred content</Text>
    </GlurView>
  );
}

API

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | radius | number | 8.0 | The total radius of the blur effect when fully applied | | offset | number | 0.3 | The distance from the view's edge to where the effect begins, relative to the view's size | | interpolation | number | 0.4 | The distance from the offset to where the effect is fully applied, relative to the view's size | | direction | 'up' \| 'down' \| 'left' \| 'right' | 'down' | The direction in which the effect is applied | | noise | number | 0.1 | The amount of noise that should be applied to the view | | drawingGroup | boolean | true | Whether or not to pre-render the modified view with drawingGroup() | | style | ViewStyle | - | Additional style for the container view | | children | ReactNode | - | Child views to be blurred |

Platform Support

• iOS: Full support (requires iOS 13.0+, Metal implementation requires iOS 17.0+)
• Android: Not supported (component renders children without blur effect)
• Other platforms: Not supported (component renders children without blur effect)

Requirements

• React Native >= 0.60.0
• iOS >= 13.0 (for basic support)
• iOS >= 17.0 (for full Metal implementation - recommended)
• Xcode 14.0+

Notes

• The Metal implementation is only available on iOS 17.0 and later. On older iOS versions, a compatibility effect will be used.
• When used in the iOS simulator, SwiftUI shader effects may not be displayed if the view exceeds 545 points in either dimension. On physical devices, the effect works as intended.
• This module can only be applied to pure React Native views. UIKit-backed views (such as ScrollView) may not work correctly due to SwiftUI limitations.

Example

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import GlurView from 'react-native-ios-glur';

export default function BlurredHeader() {
  return (
    <GlurView
      radius={15}
      offset={0.1}
      interpolation={0.3}
      direction="down"
      style={styles.container}
    >
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={styles.image}
      />
    </GlurView>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 300,
  },
  image: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
});

How It Works

This library embeds the Glur source code directly and wraps it for React Native by:

1. Including the Glur Swift source code and Metal shader directly in the package (no external dependencies)
2. Creating a native UIView component that uses UIHostingController to embed SwiftUI views
3. Capturing child React Native views as snapshots and applying the Glur blur effect
4. Bridging the configuration props from JavaScript to the native Swift code

The blur effect uses Metal shaders for efficient GPU-accelerated rendering, similar to Apple's native blur effects. The source code is based on Glur by joogps.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Acknowledgments

• Glur by joogps - The underlying SwiftUI blur library