Skip to content

Commit f4413f7

Browse files
author
greweb
committed
fix: add real images to ImageTestScreen in web example
The ImageTestScreen was only showing colored boxes instead of actual images. Now it includes: - 3 random images from Picsum Photos API - 1 colored box for comparison - Updated description to reflect real image testing - Added testImage style for proper image rendering This makes the ImageTestScreen actually test image capture functionality.
1 parent 0aa1abb commit f4413f7

File tree

1 file changed

+38
-9
lines changed

1 file changed

+38
-9
lines changed

example-web/src/screens/ImageTestScreen.tsx

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,9 @@ const ImageTestScreen: React.FC<Props> = ({goBack}) => {
5151
<View style={styles.infoCard}>
5252
<Text style={styles.infoTitle}>📸 About Image Capture</Text>
5353
<Text style={styles.infoText}>
54-
This test demonstrates capturing views that contain images. The
55-
library can capture both inline data URIs and styled elements
56-
containing images.
54+
This test demonstrates capturing views that contain real images from external URLs.
55+
The library can capture both inline images and styled elements containing images.
56+
Test with different formats (PNG/JPG) to see how images are rendered in the output.
5757
</Text>
5858
</View>
5959

@@ -62,18 +62,41 @@ const ImageTestScreen: React.FC<Props> = ({goBack}) => {
6262
<Text style={styles.title}>🖼️ Image Gallery</Text>
6363

6464
<View style={styles.imageCard}>
65-
<View style={styles.colorBox} />
66-
<Text style={styles.cardText}>Colored Box</Text>
65+
<Image
66+
source={{
67+
uri: "https://picsum.photos/100/100?random=1",
68+
}}
69+
style={styles.testImage}
70+
resizeMode="cover"
71+
/>
72+
<Text style={styles.cardText}>Random Image 1</Text>
73+
</View>
74+
75+
<View style={styles.imageCard}>
76+
<Image
77+
source={{
78+
uri: "https://picsum.photos/100/100?random=2",
79+
}}
80+
style={styles.testImage}
81+
resizeMode="cover"
82+
/>
83+
<Text style={styles.cardText}>Random Image 2</Text>
6784
</View>
6885

6986
<View style={styles.imageCard}>
70-
<View style={[styles.colorBox, {backgroundColor: "#E91E63"}]} />
71-
<Text style={styles.cardText}>Another Color</Text>
87+
<Image
88+
source={{
89+
uri: "https://picsum.photos/100/100?random=3",
90+
}}
91+
style={styles.testImage}
92+
resizeMode="cover"
93+
/>
94+
<Text style={styles.cardText}>Random Image 3</Text>
7295
</View>
7396

7497
<View style={styles.imageCard}>
75-
<View style={[styles.colorBox, {backgroundColor: "#9C27B0"}]} />
76-
<Text style={styles.cardText}>Third Color</Text>
98+
<View style={styles.colorBox} />
99+
<Text style={styles.cardText}>Colored Box (for comparison)</Text>
77100
</View>
78101

79102
<View style={styles.gradientBox}>
@@ -238,6 +261,12 @@ const styles = StyleSheet.create({
238261
borderRadius: 8,
239262
marginRight: 16,
240263
},
264+
testImage: {
265+
width: 50,
266+
height: 50,
267+
borderRadius: 8,
268+
marginRight: 16,
269+
},
241270
cardText: {
242271
fontSize: 16,
243272
color: "#333",

0 commit comments

Comments
 (0)