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