1import { Image, ImageSource } from 'expo-image';
2import React from 'react';
3import { ScrollView, StyleSheet, View } from 'react-native';
4
5import MonoText from '../../components/MonoText';
6import { Colors } from '../../constants';
7
8const EXAMPLES = [
9  {
10    description: 'tintColor={null}',
11    tintColor: null,
12  },
13  {
14    description: 'tintColor="red"',
15    tintColor: 'red',
16  },
17  {
18    description: 'tintColor={Colors.tintColor}',
19    tintColor: Colors.tintColor,
20  },
21  {
22    description: 'tintColor="#0002"',
23    tintColor: '#0002',
24  },
25];
26
27const IMAGES: ImageSource[] = [
28  require('../../../assets/images/expo.svg'),
29  'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg',
30  'https://img.icons8.com/?size=512&id=121173&format=png',
31];
32
33export default function ImageTintingScreen() {
34  return (
35    <ScrollView style={styles.container}>
36      {EXAMPLES.map((example, index) => {
37        return (
38          <View style={styles.example} key={index}>
39            <MonoText>{example.description}</MonoText>
40            <View style={styles.group}>
41              {IMAGES.map((image, imageIndex) => {
42                return (
43                  <Image
44                    style={styles.image}
45                    source={image}
46                    contentFit="contain"
47                    tintColor={example.tintColor}
48                    key={imageIndex}
49                  />
50                );
51              })}
52            </View>
53          </View>
54        );
55      })}
56    </ScrollView>
57  );
58}
59
60const styles = StyleSheet.create({
61  container: {
62    flex: 1,
63  },
64  example: {
65    alignItems: 'flex-start',
66    paddingVertical: 10,
67    paddingHorizontal: 20,
68    borderTopColor: Colors.border,
69    borderTopWidth: StyleSheet.hairlineWidth,
70  },
71  group: {
72    flex: 1,
73    flexDirection: 'row',
74    gap: 20,
75  },
76  image: {
77    width: 100,
78    height: 100,
79    borderWidth: 1,
80    borderColor: Colors.border,
81    marginVertical: 10,
82  },
83});
84