open dynamic image by modal in a flatList react native

I have a flatList which give the data from a json.js file like below:

{
"photosList" : [
  {
    "key": 111,
    "description": "dress No 1",
    "photo": "require('../Images/111.jpg')"
  },
  {
    "key": 222,
    "description": "dress No 2",
    "photo": "require('../Images/222.jpg')"
  },
  {
    "key": 333,
    "description": "dress No 3",
    "photo": "require('../Images/333.jpg')"
  }]

in the flatList I insert the "key" ,"description" and "photo" ...all things is ok till now! I want to open image on full size if click the images of the list, so I used ((Modal)). but my modal is "static" and bring up just a picture! I want to click on each images of list to open that image !like photo gallery. here is a part of my code:

<FlatList
              data={photosList}
              numColumns={3}
              renderItem={({ item }) => (
                <TouchableOpacity
                  onPress={() => this.setModalVisible(true)}
                >
                  <View>
                    <Image
                      source={{ uri: item.photo }}
                      style={{
                        width: "100%",
                        height: "100%"
                      }}
                    />
                    <Text>{item.key}</Text>
                    <Text>{item.description}</Text>
                    <Modal
                      animationType="fade"
                      transparent={true}
                      visible={modalVisible}
                      onRequestClose={() => {
                        this.setModalVisible(!modalVisible);
                      }}
                    >
...
                         <View style={styles.modalImage}>
                          <Image
                            source={require("../Images/xxx.jpg")}
                            style={styles.img}
                          ></Image>
                        </View>
                      </Modal>