react-native-vision-camera/example/src/views/StatusBarBlurBackground.tsx

33 lines
885 B
TypeScript
Raw Normal View History

2021-02-20 09:07:10 -07:00
import { BlurView, BlurViewProperties } from '@react-native-community/blur';
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
import StaticSafeAreaInsets from 'react-native-static-safe-area-insets';
2021-02-19 10:53:08 -07:00
2021-02-20 09:07:10 -07:00
const FALLBACK_COLOR = 'rgba(140, 140, 140, 0.3)';
2021-02-19 10:53:08 -07:00
2021-02-20 09:07:10 -07:00
const StatusBarBlurBackgroundImpl = ({ style, ...props }: BlurViewProperties) => {
2021-02-19 10:53:08 -07:00
if (Platform.OS !== 'ios') return null;
return (
<BlurView
style={[styles.statusBarBackground, style]}
blurAmount={25}
blurType="light"
reducedTransparencyFallbackColor={FALLBACK_COLOR}
{...props}
/>
);
};
export const StatusBarBlurBackground = React.memo(StatusBarBlurBackgroundImpl);
const styles = StyleSheet.create({
statusBarBackground: {
2021-02-20 09:07:10 -07:00
position: 'absolute',
2021-02-19 10:53:08 -07:00
top: 0,
left: 0,
right: 0,
height: StaticSafeAreaInsets.safeAreaInsetsTop,
},
});