1import { Image, ImageSource } from 'expo-image';
2import * as React from 'react';
3import { ImageBackground, StyleSheet, View } from 'react-native';
4
5type ComparisonImageProps = {
6  source: ImageSource | null;
7  placeholder?: ImageSource;
8  showGrid?: boolean;
9  transition?: number;
10};
11
12export default function ComparisonImage({
13  source,
14  placeholder,
15  showGrid = false,
16  transition = 2000,
17}: ComparisonImageProps) {
18  const image = (
19    <Image
20      style={styles.image}
21      source={source}
22      contentFit="cover"
23      cachePolicy="none"
24      placeholder={placeholder}
25      transition={transition}
26    />
27  );
28  // background is useful for showing grid on transparent views
29  const background = showGrid ? require('../../../assets/images/transparencyGrid.png') : null;
30
31  return background ? (
32    <ImageBackground source={background} style={styles.imageContainer}>
33      {image}
34    </ImageBackground>
35  ) : (
36    <View style={styles.imageContainer}>{image}</View>
37  );
38}
39
40const styles = StyleSheet.create({
41  image: {
42    flex: 1,
43  },
44  imageContainer: {
45    flex: 1,
46    height: 150,
47    marginVertical: 5,
48  },
49});
50