@danielsaraldi/react-native-blur-view/lib/module/BlurView.js

A simple blur view in react native

"use strict";

import { Children, useMemo, useState, useEffect, useCallback, forwardRef } from 'react';
import { findNodeHandle, Platform, View } from 'react-native';
import Blur from './BlurViewNativeComponent';
import { globalStyles } from "./styles/index.js";

/**
 * @description The `BlurView` component is a React Native component that
 * provides a native blur effect to its children.
 *
 * @see https://github.com/DanielAraldi/react-native-blur-view?tab=readme-ov-file#blurview
 *
 * @since 0.1.0
 *
 * @example
 * ```tsx
 * import React, { useRef } from 'react';
 * import { View, Text } from 'react-native';
 * import { BlurView, BlurTarget } from '@danielsaraldi/react-native-blur-view';
 * import { styles } from './styles';
 *
 * const MyComponent = () => {
 *   const blurTargetRef = useRef<View | null>(null);
 *
 *   return (
 *     <View style={styles.container}>
 *       <BlurTarget ref={blurTargetRef} style={styles.blurTarget} />
 *
 *       <BlurView blurTarget={blurTargetRef} style={styles.blurView}>
 *         <Text style={styles.blurText}>Blurred Content</Text>
 *       </BlurView>
 *     </View>
 *   );
 * };
 * ```
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const BlurView = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    type = 'light',
    radius = 10,
    downscaleFactor = 6,
    reducedTransparencyFallbackColor = 'white',
    blurTarget,
    style,
    children,
    overlayColor,
    androidColor,
    ...rest
  } = props;
  const [targetId, setTargetId] = useState(undefined);
  const isAndroid = Platform.OS === 'android';
  const backgroundColor = {
    backgroundColor: overlayColor
  };
  const updateBlurTarget = useCallback(() => {
    const node = blurTarget ? findNodeHandle(blurTarget.current) : undefined;
    setTargetId(node || undefined);
  }, [blurTarget]);
  const commonProps = useMemo(() => {
    const isPrimary = type === 'extra-light' || type === 'light' || type === 'dark' || type === 'extra-dark';
    const _radius = isPrimary ? radius : 35;
    return {
      ref,
      androidColor,
      downscaleFactor,
      targetId: isAndroid ? targetId : undefined,
      reducedTransparencyFallbackColor,
      overlayColor: type,
      radius: isAndroid ? _radius : radius,
      ...rest
    };
  }, [ref, type, radius, downscaleFactor, androidColor, reducedTransparencyFallbackColor, targetId, rest, isAndroid]);
  useEffect(() => {
    updateBlurTarget();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  if (!Children.count(children)) {
    return /*#__PURE__*/_jsx(View, {
      style: [globalStyles.container, style],
      children: /*#__PURE__*/_jsx(Blur, {
        style: [globalStyles.absoluteFill, backgroundColor],
        ...commonProps
      })
    });
  }
  return /*#__PURE__*/_jsx(View, {
    style: [globalStyles.container, style, !isAndroid && backgroundColor],
    children: isAndroid ? /*#__PURE__*/_jsx(Blur, {
      style: globalStyles.absoluteFill,
      ...commonProps,
      children: /*#__PURE__*/_jsx(View, {
        style: [globalStyles.content, style, backgroundColor],
        children: children
      })
    }) : /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Blur, {
        style: globalStyles.absoluteFill,
        ...commonProps
      }), children]
    })
  });
});
//# sourceMappingURL=BlurView.js.map