1import Ionicons from '@expo/vector-icons/build/Ionicons';
2import React from 'react';
3import { Image, StyleSheet, TouchableOpacity } from 'react-native';
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(
30      (state) => ({ selected: !state.selected }),
31      () => this.props.onSelectionToggle(this.props.uri, this.state.selected)
32    );
33  };
34
35  render() {
36    const { uri } = this.props;
37    return (
38      <TouchableOpacity
39        style={styles.pictureWrapper}
40        onPress={this.toggleSelection}
41        activeOpacity={1}>
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