React Native Tint Blur

A customizable tint blur effect component for React Native that creates smooth gradient blur overlays. Perfect for creating modern iOS-style blurred backgrounds with gradient masks.

Features

• 🎨 Gradient Blur Effects: Create smooth blur transitions in any direction
• 🔧 Highly Customizable: Control blur intensity, tint, gradient locations, and directions
• 📱 iOS Optimized: Uses native iOS blur effects with expo-blur
• 🎯 Easy to Use: Simple API with sensible defaults
• 🎪 Flexible Styling: Supports custom styles and props for all underlying components

Installation

npm install react-native-tint-blur

Dependencies

This package requires the following peer dependencies:

npm install expo-blur expo-linear-gradient @react-native-masked-view/masked-view

For Expo projects:

expo install expo-blur expo-linear-gradient @react-native-masked-view/masked-view

Usage

Basic Example

import React from 'react';
import { View, Text, ImageBackground } from 'react-native';
import TintBlur from 'react-native-tint-blur';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <ImageBackground
        source={{ uri: 'https://example.com/your-image.jpg' }}
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
      >
        <Text style={{ fontSize: 24, color: 'white' }}>
          Content behind blur
        </Text>
        
        {/* Bottom gradient blur overlay */}
        <TintBlur
          direction="bottom"
          intensity={30}
          tint="dark"
          style={{ height: 200 }}
        />
      </ImageBackground>
    </View>
  );
};

export default App;

Advanced Example

import React from 'react';
import { View, Text, ImageBackground, StyleSheet } from 'react-native';
import TintBlur from 'react-native-tint-blur';

const AdvancedExample = () => {
  return (
    <View style={styles.container}>
      <ImageBackground
        source={{ uri: 'https://example.com/background.jpg' }}
        style={styles.background}
      >
        {/* Content */}
        <View style={styles.content}>
          <Text style={styles.title}>Beautiful Blur Effect</Text>
          <Text style={styles.subtitle}>Smooth gradient transitions</Text>
        </View>

        {/* Top blur overlay */}
        <TintBlur
          direction="top"
          intensity={25}
          tint="light"
          locations={[0, 0.4]}
          style={styles.topBlur}
        />

        {/* Bottom blur overlay */}
        <TintBlur
          direction="bottom"
          intensity={35}
          tint="dark"
          locations={[0, 0.6]}
          style={styles.bottomBlur}
        />
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    alignItems: 'center',
    zIndex: 1,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 18,
    color: 'rgba(255, 255, 255, 0.8)',
    textAlign: 'center',
  },
  topBlur: {
    height: 150,
    top: 0,
  },
  bottomBlur: {
    height: 200,
    bottom: 0,
    top: 'auto',
  },
});

export default AdvancedExample;

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | direction | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' | Direction of the gradient blur effect | | locations | number[] | [0, 0.25] | Array of numbers defining gradient stop locations (0-1) | | intensity | number | 25 | Blur intensity (0-100) | | tint | 'light' \| 'dark' \| 'default' | 'light' | Blur tint style | | style | ViewStyle | {} | Custom styles for the container | | blurProps | BlurViewProps | {} | Additional props passed to the BlurView component | | maskedViewProps | MaskedViewProps | {} | Additional props passed to the MaskedView component | | linearGradientProps | LinearGradientProps | {} | Additional props passed to the LinearGradient component |

Direction Options

• 'bottom': Blur fades from bottom to top (transparent → opaque)
• 'top': Blur fades from top to bottom (transparent → opaque)
• 'left': Blur fades from left to right (transparent → opaque)
• 'right': Blur fades from right to left (transparent → opaque)

Tint Options

• 'light': Light blur effect with bright appearance
• 'dark': Dark blur effect with dark appearance
• 'default': System default blur appearance

Platform Support

• ✅ iOS: Full support with native blur effects
• ❌ Android: Currently not supported (returns empty component)

Note: This component is designed specifically for iOS and uses native iOS blur effects. Android support may be added in future versions.

Common Use Cases

1. Bottom Navigation Overlay

<TintBlur
  direction="bottom"
  intensity={30}
  tint="light"
  style={{ height: 100, bottom: 0 }}
/>

2. Header Overlay

<TintBlur
  direction="top"
  intensity={25}
  tint="dark"
  style={{ height: 80, top: 0 }}
/>

3. Custom Gradient Stops

<TintBlur
  direction="bottom"
  locations={[0, 0.3, 0.7, 1]}
  intensity={40}
  style={{ height: 200 }}
/>

Tips

1. Positioning: The component uses position: 'absolute' by default. Use style prop to customize positioning.

2. Z-Index: Make sure to set appropriate zIndex values to layer the blur effect correctly.

3. Performance: Higher intensity values may impact performance on older devices.

4. Gradient Locations: Use locations array to fine-tune where the blur starts and ends.

Contributing

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

License

MIT License - see the LICENSE file for details.

Author

Created by hydralerne

Repository

https://github.com/hydralerne/react-native-tint-blur