| 1 | import PropTypes from 'prop-types';
|
| 2 | import * as React from 'react';
|
| 3 | import { View, StyleSheet, ViewPropTypes } from 'react-native';
|
| 4 |
|
| 5 | type Props = {
|
| 6 | tint: BlurTint;
|
| 7 | } & React.ComponentProps<typeof View>;
|
| 8 | type BlurTint = 'light' | 'dark' | 'default';
|
| 9 |
|
| 10 | export default class BlurView extends React.Component<Props> {
|
| 11 | static propTypes = {
|
| 12 | tint: PropTypes.oneOf(['light', 'default', 'dark']),
|
| 13 | ...ViewPropTypes,
|
| 14 | };
|
| 15 |
|
| 16 | render() {
|
| 17 | let { tint, style = {}, ...props } = this.props;
|
| 18 |
|
| 19 | let backgroundColor = 'rgba(255,255,255,0.4)';
|
| 20 | if (tint === 'dark') {
|
| 21 | backgroundColor = 'rgba(0,0,0,0.5)';
|
| 22 | } else if (tint === 'light') {
|
| 23 | backgroundColor = 'rgba(255,255,255,0.7)';
|
| 24 | }
|
| 25 |
|
| 26 | return <View {...props} style={StyleSheet.flatten([style, { backgroundColor }])} />;
|
| 27 | }
|
| 28 | }
|