@danielsaraldi/react-native-blur-view
Version:
A simple blur view in react native
59 lines (58 loc) • 2.04 kB
JavaScript
;
import { forwardRef, memo, useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { BlurViewView } from "../fabrics/index.js";
import { globalStyles } from "../styles/index.js";
import { clip } from "../utils/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BlurView = /*#__PURE__*/forwardRef((props, ref) => {
const {
type = 'light',
radius = 10,
style,
blurStyle,
contentStyle,
children,
...rest
} = props;
const blurRadius = useMemo(() => clip(radius, 0, 100), [radius]);
const overlayColors = {
'x-light': 'xlight',
'light': 'light',
'dark': 'dark',
'thin-material': 'thinMaterial',
'thin-material-light': 'thinMaterialLight',
'thin-material-dark': 'thinMaterialDark',
'material': 'material',
'material-light': 'materialLight',
'material-dark': 'materialDark',
'chrome-material': 'chromeMaterial',
'chrome-material-light': 'chromeMaterialLight',
'chrome-material-dark': 'chromeMaterialDark',
'thick-material': 'thickMaterial',
'thick-material-light': 'thickMaterialLight',
'thick-material-dark': 'thickMaterialDark',
'ultra-thin-material': 'ultraThinMaterial',
'ultra-thin-material-light': 'ultraThinMaterialLight',
'ultra-thin-material-dark': 'ultraThinMaterialDark',
'prominent': 'prominent',
'regular': 'regular'
};
const overlayColor = overlayColors[type] || overlayColors.light;
return /*#__PURE__*/_jsxs(View, {
ref: ref,
style: StyleSheet.compose(globalStyles.container, style),
children: [/*#__PURE__*/_jsx(BlurViewView, {
overlayColor: overlayColor,
blurRadius: blurRadius,
pointerEvents: "none",
style: StyleSheet.compose(globalStyles.vibrancy, blurStyle),
...rest
}), /*#__PURE__*/_jsx(View, {
style: StyleSheet.compose(globalStyles.content, contentStyle),
children: children
})]
});
});
export default /*#__PURE__*/memo(BlurView);
//# sourceMappingURL=BlurView.ios.js.map