@sbaiahmed1/react-native-blur 0.1.0

package/src/BlurView.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+import ReactNativeBlurView, {
+  type BlurType,
+} from './ReactNativeBlurViewNativeComponent';
+
+export interface BlurViewProps {
+  /**
+   * The type of blur effect to apply
+   * @default 'light'
+   */
+  blurType?: BlurType;
+
+  /**
+   * The intensity of the blur effect (0-100)
+   * @default 10
+   */
+  blurAmount?: number;
+
+  /**
+   * Fallback color when reduced transparency is enabled
+   * Accepts hex color strings like '#FFFFFF'
+   */
+  reducedTransparencyFallbackColor?: string;
+
+  /**
+   * Style object for the blur view
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Child components to render inside the blur view
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * A cross-platform blur view component that provides native blur effects.
+ *
+ * On iOS, this uses UIVisualEffectView for true blur effects.
+ * On Android, this uses the BlurView library for hardware-accelerated blur effects.
+ *
+ * @example
+ * ```tsx
+ * <BlurView
+ *   blurType="light"
+ *   blurAmount={20}
+ *   style={{ flex: 1 }}
+ * >
+ *   <Text>Content behind blur</Text>
+ * </BlurView>
+ * ```
+ */
+export const BlurView: React.FC<BlurViewProps> = ({
+  blurType = 'light',
+  blurAmount = 10,
+  reducedTransparencyFallbackColor,
+  style,
+  children,
+  ...props
+}) => {
+  return (
+    <ReactNativeBlurView
+      blurType={blurType}
+      blurAmount={blurAmount}
+      reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
+      style={style}
+      {...props}
+    >
+      {children}
+    </ReactNativeBlurView>
+  );
+};
+
+export default BlurView;

package/src/ReactNativeBlurViewNativeComponent.ts

@@ -0,0 +1,27 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type {
+  WithDefault,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type BlurType =
+  | 'xlight'
+  | 'light'
+  | 'dark'
+  | 'extraDark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial';
+
+interface NativeProps extends ViewProps {
+  blurType?: WithDefault<BlurType, 'light'>;
+  blurAmount?: WithDefault<Double, 10>;
+  reducedTransparencyFallbackColor?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');

package/src/index.tsx

@@ -0,0 +1,5 @@
+export { default as ReactNativeBlurView } from './ReactNativeBlurViewNativeComponent';
+export * from './ReactNativeBlurViewNativeComponent';
+
+export { BlurView as default, BlurView } from './BlurView';
+export type { BlurViewProps } from './BlurView';