1import { Image, ImageSource } from 'expo-image';
2import React from 'react';
3import { ScrollView, StyleSheet, Text } from 'react-native';
4
5import { Colors } from '../../constants';
6
7export default function ImageSrcSetScreen() {
8  const source: ImageSource[] = [
9    {
10      uri: `https://picsum.photos/id/238/800/800`,
11      width: 800,
12      height: 800,
13      webMaxViewportWidth: 800,
14    },
15    {
16      uri: `https://picsum.photos/id/237/1200/1200`,
17      width: 1200,
18      height: 1200,
19      webMaxViewportWidth: 1200,
20    },
21    {
22      uri: `https://picsum.photos/id/236/600/600`,
23      width: 600,
24      height: 600,
25      webMaxViewportWidth: 600,
26    },
27  ];
28
29  return (
30    <ScrollView style={styles.container}>
31      <Text style={styles.hintText}>
32        This image is using the srcSet prop to load different images depending on the viewport
33        width.
34      </Text>
35      <Image style={styles.image} source={source} />
36    </ScrollView>
37  );
38}
39
40const styles = StyleSheet.create({
41  container: {
42    flex: 1,
43  },
44  hintText: {
45    color: Colors.secondaryText,
46    margin: 15,
47  },
48  image: {
49    width: 300,
50    margin: 15,
51    height: 300,
52  },
53});
54