react-native-blur/example/App.js

/**
 * Basic [iOS] Example for react-native-blur
 * https://github.com/react-native-community/react-native-blur
 */
import React, {Component} from 'react';
import {
  Image,
  SegmentedControlIOS,
  StyleSheet,
  Platform,
  Switch,
  Text,
  View,
} from 'react-native';

import {BlurView, VibrancyView} from '@react-native-community/blur';

export default class Basic extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showBlurs: true,
      blurBlurType: 'light',
      blurActiveSegment: 1,
      vibrancyBlurType: 'dark',
      vibrancyActiveSegment: 2,
    };
  }

  _onBlurChange(event) {
    this.setState({blurActiveSegment: event.nativeEvent.selectedSegmentIndex});
  }

  _onBlurValueChange(value) {
    this.setState({blurBlurType: value});
  }

  _onVibrancyChange(event) {
    this.setState({
      vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex,
    });
  }

  _onVibrancyValueChange(value) {
    this.setState({vibrancyBlurType: value});
  }

  renderBlurs() {
    const tintColor = this.state.blurBlurType === 'xlight' ? 'black' : 'white';
    const platform = Platform.OS === 'ios' ? 'iOS' : 'Android';

    return (
      <View style={styles.container}>
        <View style={styles.blurContainer}>
          {/*
            BlurView is supported on both iOS and Android.
            If you also need to support Android, the BlurView must be
            absolutely positioned behind your unblurred views, and it
            cannot contain any child views.
          */}
          <BlurView
            blurType={this.state.blurBlurType}
            blurAmount={100}
            reducedTransparencyFallbackColor={'pink'}
            style={[styles.blurView]}>
            <Text style={[styles.text, {color: tintColor}]}>
              Blur component ({platform})
            </Text>
            {Platform.OS === 'ios' && (
              <SegmentedControlIOS
                values={['xlight', 'light', 'dark', 'regular', 'prominent']}
                selectedIndex={this.state.blurActiveSegment}
                onChange={(event) => {
                  this._onBlurChange(event);
                }}
                onValueChange={(value) => {
                  this._onBlurValueChange(value);
                }}
                tintColor={tintColor}
              />
            )}
          </BlurView>
        </View>

        {
          /*
            VibrancyView is only supported on iOS, and must contain child views,
            otherwise the vibrancy effect doesn't work.
          */
          Platform.OS === 'ios' && (
            <VibrancyView
              blurType={this.state.vibrancyBlurType}
              blurAmount={10}
              reducedTransparencyFallbackColor={'pink'}
              style={[styles.container, styles.blurContainer]}>
              <Text style={styles.text}>Vibrancy component (iOS-only)</Text>

              <SegmentedControlIOS
                values={['xlight', 'light', 'dark', 'regular', 'prominent']}
                selectedIndex={this.state.vibrancyActiveSegment}
                onChange={(event) => {
                  this._onVibrancyChange(event);
                }}
                onValueChange={(value) => {
                  this._onVibrancyValueChange(value);
                }}
                tintColor="white"
              />
            </VibrancyView>
          )
        }
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={require('./bgimage.jpeg')}
          resizeMode="cover"
          style={styles.img}
        />

        {this.state.showBlurs ? this.renderBlurs() : null}

        <View style={styles.blurToggle}>
          <Switch
            onValueChange={(value) => this.setState({showBlurs: value})}
            value={this.state.showBlurs}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  blurContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'stretch',
    paddingHorizontal: 20,
  },
  blurView: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  img: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    height: null,
    width: null,
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
  blurToggle: {
    position: 'absolute',
    top: 30,
    right: 10,
    alignItems: 'flex-end',
  },
});