1import { BlurTint, BlurView } from 'expo-blur';
2import React, { useState, useCallback, useRef, memo } from 'react';
3import { View, StyleSheet, Text, Image, Animated } from 'react-native';
4
5import Slider from './Slider';
6import { useLoopingAnimatedValue, useResettingState } from './utils';
7
8const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
9
10export default memo((props: { tint: BlurTint }) => {
11  const blurViewRef = useRef<View>(null);
12
13  const animatedIntensity = useLoopingAnimatedValue(1, 100);
14  const [manualIntensity, setManualIntensity] = useState(0);
15  const [manualIntensityIsActive, setManualIntensityIsActive] = useResettingState(false, 3000);
16
17  const handleSliderChange = useCallback((value: number) => {
18    setManualIntensityIsActive(true);
19    setManualIntensity(value);
20  }, []);
21
22  return (
23    <View style={styles.container}>
24      <View style={styles.innerContainer}>
25        <Image style={styles.image} source={{ uri: 'https://source.unsplash.com/300x300' }} />
26        <Text style={styles.blurredText}>This text is blurred</Text>
27        <AnimatedBlurView
28          ref={blurViewRef}
29          style={styles.blurView}
30          intensity={manualIntensityIsActive ? manualIntensity : animatedIntensity}
31          tint={props.tint}>
32          <Text style={styles.nonBlurredText}>{props.tint}</Text>
33
34          <Slider
35            title="Manual intensity:"
36            onChange={handleSliderChange}
37            active={!!manualIntensityIsActive}
38            value={manualIntensity}
39            style={styles.slider}
40          />
41        </AnimatedBlurView>
42      </View>
43    </View>
44  );
45});
46
47const styles = StyleSheet.create({
48  container: {
49    alignItems: 'center',
50    justifyContent: 'center',
51    padding: 6,
52  },
53  innerContainer: {
54    alignItems: 'center',
55    justifyContent: 'center',
56  },
57  image: {
58    width: 250,
59    height: 250,
60  },
61  blurredText: {
62    position: 'absolute',
63    padding: 10,
64    backgroundColor: 'rgb(120,20,20)',
65    color: 'white',
66    fontWeight: 'bold',
67    fontSize: 20,
68    borderRadius: 5,
69  },
70  blurView: {
71    ...StyleSheet.absoluteFillObject,
72    alignItems: 'center',
73    paddingTop: 20,
74  },
75  nonBlurredText: {
76    paddingHorizontal: 10,
77    paddingVertical: 4,
78    backgroundColor: 'rgb(120,20,20)',
79    color: 'white',
80    fontWeight: 'bold',
81    fontSize: 18,
82  },
83  slider: {
84    position: 'absolute',
85    bottom: 10,
86  },
87});
88