rn-performant-blurview

A high-performance, cross-platform blur view component for React Native that delivers smooth blur effects without sacrificing application performance.

Why Choose This Package?

Most React Native blur solutions suffer from performance issues, especially during animations or when blurring complex content. This package addresses these concerns by:

• Using native implementations on both iOS and Android for optimal performance
• Applying hardware acceleration whenever possible
• Optimizing render cycles to minimize impact on your app's frame rate
• Providing a consistent API across platforms

Installation

npm install rn-performant-blurview
# or
yarn add rn-performant-blurview

iOS Setup

This package uses native modules. For iOS, you need to install the pods:

cd ios && pod install

Android Setup

For Android, no additional setup is required beyond the standard React Native linking process which happens automatically with React Native 0.60 and above.

Usage

import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { BlurView } from 'rn-performant-blurview';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/background-image.jpg' }}
        style={styles.backgroundImage}
      />
      
      {/* Basic usage with default props */}
      <BlurView style={styles.blurContainer}>
        <Text style={styles.text}>Basic Blur</Text>
      </BlurView>
      
      {/* Customized blur */}
      <BlurView 
        style={styles.customBlurContainer}
        blurAmount={10}
        blurType="light"
        reducedTransparencyFallbackColor="white"
      >
        <Text style={styles.text}>Custom Blur Settings</Text>
      </BlurView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    position: 'absolute',
    width: '100%',
    height: '100%',
  },
  blurContainer: {
    padding: 20,
    margin: 20,
    borderRadius: 8,
  },
  customBlurContainer: {
    padding: 20,
    margin: 20,
    borderRadius: 20,
  },
  text: {
    fontSize: 16,
    color: 'white',
    fontWeight: 'bold',
  },
});

export default MyComponent;

Props

| Prop | Type | Default | Description | Platform | |------|------|---------|-------------|----------| | blurAmount | Number | 10 | The intensity of the blur effect. Higher numbers produce more blur. | iOS & Android | | blurType | String | 'dark' | One of: 'dark', 'light', 'xlight', 'prominent', 'regular', 'extraDark' | iOS | | blurRadius | Number | blurAmount | The blur radius (Android-specific, but can be used cross-platform as an alias for blurAmount) | Android | | downsampleFactor | Number | 5 | A higher value improves performance but reduces quality | Android | | overlayColor | String | 'rgba(0, 0, 0, 0.2)' | Adds a color overlay on top of the blur | Android | | reducedTransparencyFallbackColor | String | '#FFFFFF' | Background color to use when reduced transparency is enabled | iOS | | renderToHardwareTextureAndroid | Boolean | true | Whether to render the BlurView to a hardware texture on Android | Android | | shouldRasterizeIOS | Boolean | true | Whether to rasterize the BlurView on iOS | iOS |

Performance Tips

To get the best performance from this blur view:

1. Avoid unnecessary re-renders: The blur operation is expensive, so minimize re-renders of the BlurView component.

2. Use appropriate blur amounts: Higher blur amounts require more computational power. Use the minimum required for your design.

3. Consider component size: Blurring large areas of the screen requires more resources than small areas.

4. For moving content: If you're animating content behind the blur, consider using:

   <BlurView
     shouldRasterizeIOS={true}
     renderToHardwareTextureAndroid={true}
   >
     {/* Your content */}
   </BlurView>

5. Use useNativeDriver for animations: When animating the BlurView itself, use the native driver:

   Animated.timing(animatedValue, {
     toValue: 1,
     duration: 300,
     useNativeDriver: true,
   }).start();

Platform Differences

While we strive to make the API consistent across platforms, there are some underlying differences in implementation:

• iOS uses Apple's UIVisualEffectView for true system blur effects
• Android uses a combination of RenderScript and GPU acceleration to create blur effects

These differences might result in slightly different visual appearances between platforms.

Known Issues and Limitations

• On older Android devices, blur performance may still be suboptimal
• Very high blur amounts can cause noticeable performance drops on any device
• Animated blur intensity changes are more performant on iOS than on Android

Example Project

For a complete example, check out the example directory in the GitHub repository.

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.