1import { Image } from 'expo-image';
2import * as React from 'react';
3import { Dimensions, ScrollView, StyleSheet, Text, View } from 'react-native';
4
5import Button from '../../components/Button';
6
7const WINDOW_DIMENSIONS = Dimensions.get('window');
8const IMAGE_MARGIN = 15;
9const IMAGE_WIDTH = (WINDOW_DIMENSIONS.width - 2 * IMAGE_MARGIN) * WINDOW_DIMENSIONS.scale;
10
11export default function ImageBlurhashScreen() {
12  const [enabled, setEnabled] = React.useState(true);
13  const toggleLiveTextInteraction = React.useCallback(() => {
14    setEnabled(!enabled);
15  }, [enabled]);
16
17  return (
18    <View style={styles.container}>
19      <Text style={styles.supportText}>
20        Live Text interaction is not supported on the simulator!
21      </Text>
22
23      <Button
24        style={styles.toggleButton}
25        title={`${enabled ? 'Disable' : 'Enable'} Live Text Interaction`}
26        onPress={toggleLiveTextInteraction}
27      />
28
29      <ScrollView>
30        <Image
31          style={styles.image}
32          source={`https://images.unsplash.com/photo-1554290712-e640351074bd?w=${IMAGE_WIDTH}`}
33          contentFit="contain"
34          cachePolicy="none"
35          enableLiveTextInteraction={enabled}
36        />
37        <Image
38          style={styles.image}
39          source={`https://images.unsplash.com/photo-1562164979-6fc780665354?w=${IMAGE_WIDTH}`}
40          contentFit="contain"
41          cachePolicy="none"
42          enableLiveTextInteraction={enabled}
43        />
44        <Image
45          style={styles.image}
46          source={`https://images.unsplash.com/photo-1605206731612-e7dc29d3209a?w=${IMAGE_WIDTH}`}
47          contentFit="contain"
48          cachePolicy="none"
49          enableLiveTextInteraction={enabled}
50        />
51        <Image
52          style={styles.image}
53          source={`https://images.unsplash.com/photo-1601435119596-7cc938a5cbf4?w=${IMAGE_WIDTH}`}
54          contentFit="contain"
55          cachePolicy="none"
56          enableLiveTextInteraction={enabled}
57        />
58      </ScrollView>
59    </View>
60  );
61}
62
63const styles = StyleSheet.create({
64  container: {
65    flex: 1,
66  },
67  supportText: {
68    fontWeight: 'bold',
69    fontSize: 15,
70    textAlign: 'center',
71    marginTop: 15,
72  },
73  toggleButton: {
74    margin: 15,
75  },
76  image: {
77    flex: 1,
78    height: 250,
79    margin: IMAGE_MARGIN,
80  },
81});
82