1import * as React from 'react';
2import { useState } from 'react';
3import { StyleSheet, Text, View, ScrollView } from 'react-native';
4
5import Button from '../../components/Button';
6import ComparisonRow from '../../components/HashPlaceholdersDemo/ComparisonRow';
7import { comparisonImages } from '../../constants/ComparisonImages';
8
9export default function ImageHashPlaceholdersScreen() {
10  const [showRealImage, setShowRealImage] = useState(false);
11  return (
12    <View style={styles.container}>
13      <View style={styles.rowContainer}>
14        <Text style={styles.text}>Original</Text>
15        <Text style={styles.text}>BlurHash</Text>
16        <Text style={styles.text}>ThumbHash</Text>
17      </View>
18      <ScrollView contentContainerStyle={styles.scrollView}>
19        {comparisonImages.map((item) => (
20          <ComparisonRow
21            source={item.source}
22            blurhash={item.blurhash}
23            thumbhash={item.thumbhash}
24            showGrid={item.showGrid}
25            showRealImage={showRealImage}
26            key={item.blurhash + item.thumbhash}
27          />
28        ))}
29      </ScrollView>
30      <Button
31        title={showRealImage ? 'Reset' : 'Transition'}
32        onPress={() => setShowRealImage(!showRealImage)}
33        style={styles.button}
34      />
35    </View>
36  );
37}
38
39const styles = StyleSheet.create({
40  container: {
41    flex: 1,
42  },
43  scrollView: {
44    padding: 15,
45    paddingTop: 0,
46  },
47  rowContainer: {
48    flexDirection: 'row',
49    justifyContent: 'center',
50    gap: 15,
51  },
52  text: {
53    color: 'rgb(28,28,28)',
54    fontSize: 15,
55    textAlign: 'center',
56    margin: 10,
57    width: 100,
58    fontWeight: '600',
59  },
60  button: {
61    margin: 15,
62  },
63});
64