1import { BlurTint, BlurView } from 'expo-blur';
2import React, { useCallback, memo, useEffect } from 'react';
3import { View, StyleSheet, Text, Image } from 'react-native';
4import Animated, { useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
5
6import Slider from './Slider';
7import useResettingState from '../../utilities/useResettingState';
8
9const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
10
11export default memo((props: { tint: BlurTint }) => {
12  const animatedIntensity = useSharedValue(0);
13  const manualIntensity = useSharedValue(0);
14  const [manualIntensityIsActive, setManualIntensityIsActive] = useResettingState(false, 3000);
15
16  const handleSliderChange = useCallback((value: number) => {
17    setManualIntensityIsActive(true);
18    manualIntensity.value = value;
19  }, []);
20
21  useEffect(() => {
22    animatedIntensity.value = withRepeat(withTiming(100, { duration: 2000 }), -1, true);
23  }, []);
24
25  return (
26    <View style={styles.container}>
27      <View style={styles.innerContainer}>
28        <Image style={styles.image} source={{ uri: 'https://source.unsplash.com/300x300' }} />
29        <Text style={styles.blurredText}>This text is blurred</Text>
30        <AnimatedBlurView
31          style={styles.blurView}
32          tint={props.tint}
33          intensity={manualIntensityIsActive ? manualIntensity : animatedIntensity}>
34          <Text style={styles.nonBlurredText}>{props.tint}</Text>
35          <Slider
36            title="Manual intensity:"
37            onChange={handleSliderChange}
38            active={!!manualIntensityIsActive}
39            value={manualIntensity.value}
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