diff --git a/package.json b/package.json index 85e55c8..0a0b2e3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@procivis/one-react-native-components", - "version": "0.1.28", + "version": "0.1.29", "description": "Common Procivis ONE UI components for react-native", "main": "lib/commonjs/index", "module": "lib/module/index", diff --git a/src/blur/blur-view.tsx b/src/blur/blur-view.tsx index 8030397..ad373ec 100644 --- a/src/blur/blur-view.tsx +++ b/src/blur/blur-view.tsx @@ -12,6 +12,15 @@ export interface BlurViewProps extends ViewProps { blurStyle: 'soft' | 'strong' | 'header'; } +const BACKGROUND_COLOR = { + light: 'rgba(255, 255, 255, 0.8)', + dark: 'rgba(16, 12, 12, 0.8)', + thickMaterialLight: 'rgba(255, 255, 255, 0.95)', + thickMaterialDark: 'rgba(16, 12, 12, 0.95)', + thinMaterialLight: 'rgba(255, 255, 255, 0.8)', + thinMaterialDark: 'rgba(16, 12, 12, 0.8)', +}; + const BlurView: FC> = ({ blurAmount = 50, blurStyle, @@ -27,7 +36,7 @@ const BlurView: FC> = ({ const blurType: RNBlurViewProps['blurType'] = useMemo(() => { if (blurStyle === 'header') { - return 'regular'; + return dark ? 'dark' : 'light'; } else if (blurStyle === 'soft') { return dark ? 'thinMaterialDark' : 'thinMaterialLight'; } else { @@ -55,15 +64,7 @@ const BlurView: FC> = ({ ); } - const backgroundColors = { - regular: 'rgba(255, 255, 255, 0.8)', - thickMaterialLight: 'rgba(255, 255, 255, 0.95)', - thickMaterialDark: 'rgba(16, 12, 12, 0.95)', - thinMaterialLight: 'rgba(255, 255, 255, 0.8)', - thinMaterialDark: 'rgba(16, 12, 12, 0.8)', - }; - - const backgroundColor = color ? colorWithAlphaComponent(color, 0.9) : backgroundColors[blurType]; + const backgroundColor = color ? colorWithAlphaComponent(color, 0.9) : BACKGROUND_COLOR[blurType]; return (