react-native-blur-vibe 0.1.0

package/src/BlurView.tsx

@@ -0,0 +1,58 @@
+import { Platform, StyleSheet } from 'react-native';
+import type { BlurViewProps } from './types';
+import NativeBlurVibeView from './BlurVibeViewNativeComponent';
+
+/**
+ * BlurView — react-native-blur-vibe
+ *
+ * Cross-platform blur view for React Native.
+ * iOS: UIVisualEffectView | Android: RenderEffect (API 31+) / RenderScript fallback
+ *
+ * overlayColor works on BOTH platforms — composites a color on top of the blur,
+ * exactly like CSS: backdrop-filter: blur(Xpx) + background-color: overlayColor
+ *
+ * @example
+ * <BlurView
+ *   blurAmount={15}
+ *   blurType="systemMaterial"
+ *   overlayColor="#00000040"
+ *   style={StyleSheet.absoluteFill}
+ * />
+ */
+const BlurView = ({
+  blurAmount = 10,
+  blurType = 'light',
+  overlayColor,
+  reducedTransparencyFallbackColor = '#F2F2F2',
+  blurRadius = 4,
+  style,
+  children,
+  ...rest
+}: BlurViewProps) => {
+  const resolvedOverlayColor =
+    overlayColor ?? (Platform.OS === 'android' ? '#00000030' : 'transparent');
+
+  return (
+    <NativeBlurVibeView
+      blurAmount={blurAmount}
+      blurType={blurType}
+      overlayColor={resolvedOverlayColor}
+      reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
+      blurRadius={blurRadius}
+      style={[styles.transparent, style]}
+      {...rest}
+    >
+      {children}
+    </NativeBlurVibeView>
+  );
+};
+
+BlurView.displayName = 'BlurView';
+
+const styles = StyleSheet.create({
+  transparent: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default BlurView;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as BlurView } from './BlurView';
+export type { BlurViewProps, BlurType } from './types';

package/src/types.ts

@@ -0,0 +1,65 @@
+import type { ViewProps } from 'react-native';
+
+export type BlurType =
+  | 'light'
+  | 'dark'
+  | 'extraLight'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
+export interface BlurViewProps extends ViewProps {
+  /**
+   * Blur intensity from 0 to 100.
+   * @default 10
+   */
+  blurAmount?: number;
+
+  /**
+   * iOS only — maps to UIBlurEffectStyle.
+   * @default 'light'
+   */
+  blurType?: BlurType;
+
+  /**
+   * Overlay color composited ON TOP of the blur layer. Works on iOS AND Android.
+   *
+   * Alpha channel controls how much blur is visible — like CSS:
+   *   backdrop-filter: blur(Xpx) + background-color: overlayColor
+   *
+   * "#00000000" → transparent overlay = pure blur
+   * "#00000080" → semi-transparent black tint over blur
+   * "#FFFFFFFF" → fully opaque = blur hidden
+   *
+   * @default "transparent" on iOS | "#00000030" on Android
+   */
+  overlayColor?: string;
+
+  /**
+   * Fallback color when blur is unavailable.
+   * (Reduce Transparency on iOS, API < 21 on Android)
+   * @default "#F2F2F2"
+   */
+  reducedTransparencyFallbackColor?: string;
+
+  /**
+   * Android only — downscale factor for RenderScript blur path (API 21-30).
+   * Higher = faster performance, slightly softer blur. Range: 1–8.
+   * @default 4
+   */
+  blurRadius?: number;
+}