1import React from 'react';
2import { Image, StyleSheet, View, TouchableOpacity, Text } from 'react-native';
3import { Ionicons } from '@expo/vector-icons';
4
5const pictureSize = 150;
6
7interface State {
8  selected: boolean;
9}
10
11export default class Photo extends React.Component<
12  { uri: string; onSelectionToggle: (uri: string, selected: boolean) => void },
13  State
14> {
15  readonly state: State = {
16    selected: false,
17  };
18  _mounted = false;
19
20  componentDidMount() {
21    this._mounted = true;
22  }
23
24  componentWillUnmount() {
25    this._mounted = false;
26  }
27
28  toggleSelection = () => {
29    this.setState({ selected: !this.state.selected }, () =>
30      this.props.onSelectionToggle(this.props.uri, this.state.selected)
31    );
32  }
33
34  render() {
35    const { uri } = this.props;
36    return (
37      <TouchableOpacity
38        style={styles.pictureWrapper}
39        onPress={this.toggleSelection}
40        activeOpacity={1}
41      >
42        <Image style={styles.picture} source={{ uri }} />
43        {this.state.selected && <Ionicons name="md-checkmark-circle" size={30} color="#4630EB" />}
44      </TouchableOpacity>
45    );
46  }
47}
48
49const styles = StyleSheet.create({
50  picture: {
51    position: 'absolute',
52    bottom: 0,
53    right: 0,
54    left: 0,
55    top: 0,
56    resizeMode: 'contain',
57  },
58  pictureWrapper: {
59    width: pictureSize,
60    height: pictureSize,
61    alignItems: 'center',
62    justifyContent: 'center',
63    margin: 5,
64  },
65});
66