Réagir natif - image plus gros que parent

Comme dans Tinder, j'ai un écran avec 3 cueilleurs d'images. Lorsque je choisis une image de la galerie, je veux que cela persiste dans le conteneur touchableOpacity code>. Cependant, l'image chevauche le conteneur.

J'ai essayé diverses choses mentionnées ici mais l'image se chevauche toujours comme dans l'image ci-dessous: p>

p>

Quel est le problème? P>

/* eslint-disable react-native/no-inline-styles */
import React, { useState } from 'react'
import {
  Text,
  View,
  Image,
  Button,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from 'react-native'
import ImagePicker from 'react-native-image-crop-picker'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
import Colors from '../../../constants/Colors'
const { width: WIDTH } = Dimensions.get('window')

const ProfileEdit = () => {
  const [photo, setPhoto] = useState(null)

  const handleChoosePhoto = () => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      setPhoto({
        uri: image.path,
        width: image.width,
        height: image.height,
        mime: image.mime,
      })
      console.log(image)
    })
  }

  return (
    <View style={styles.main}>
      <View style={styles.button_row}>
        <View style={styles.buttonWrapper}>
          <TouchableOpacity
            onPress={() => handleChoosePhoto()}
            style={styles.button}>
            {photo ? (
              <Image source={photo} style={styles.photo} />
            ) : (
              <FontAwesomeIcon
                icon={faPlusCircle}
                color={Colors.defaultColor}
                size={22}
                style={styles.icon}
              />
            )}
          </TouchableOpacity>
        </View>
        <View style={styles.buttonWrapper}>
          <TouchableOpacity
            onPress={() => handleChoosePhoto()}
            style={styles.button}>
            <FontAwesomeIcon
              icon={faPlusCircle}
              color={Colors.defaultColor}
              size={22}
              style={styles.icon}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.buttonWrapper}>
          <TouchableOpacity
            onPress={() => handleChoosePhoto()}
            style={styles.button}>
            <FontAwesomeIcon
              icon={faPlusCircle}
              color={Colors.defaultColor}
              size={22}
              style={styles.icon}
            />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
  },
  icon: {},
  button: {
    height: `${100}%`,
    backgroundColor: Colors.defaultWhite,
    padding: 2,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 3,
  },
  buttonWrapper: {
    width: WIDTH / 3,
    padding: 10,
  },
  button_row: {
    flex: 0.3,
    flexWrap: 'wrap',
    flexDirection: 'row',
  },
  photo: {
    width: WIDTH / 2,
    height: WIDTH / 2,
    // borderRadius: 3,
    resizeMode: 'contain',
  },
})

export default ProfileEdit