React native how to open photo in full screen on click?

Question

JavaScript

How to open a photo in full screen on click? I tried to somehow get the key of the image and have already tried everything, but I just can’t understand,

I want to open the module with the image on which I clicked on the full screen

https://codesandbox.io/s/funny-darkness-5hkkx?file...

// App.js

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Button, FlatList, Image, Modal, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { PhotoList } from './app/components/PhotoList';

export default function App() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const [modal, setModal] = useState(true)

  useEffect(() => {
    fetch('https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.log(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <>
      <PhotoList data={data} />
    </>
  );
};

const styles = StyleSheet.create({

})

//PhotoList.js

import React, { useState } from 'react';
import { Button, FlatList, Image, Modal, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';

function PhotoList({ data, onPress }) {

  const [openModal, setOpenModal] = useState(false)

  const renderItem = ({ item }) => (
    <TouchableWithoutFeedback onPress={() => { setOpenModal(true) }}>
      <View style={styles.renderItem} key={item.urls.regular}>
        <Image style={styles.img} source={{ uri: item.urls.regular }} />
        <Text>By {item.user.username}</Text>
      </View>
    </TouchableWithoutFeedback>
  )

  return (
    <>
        <View>
          <FlatList numColumns={2}
            data={data}
            renderItem={renderItem}
          />
        </View>

      <Modal visible={openModal}>
        <Button onPress={() => { setOpenModal(false) }} title='X' />
        <Text>Hello</Text>
      </Modal>
    </>
  );
};

const styles = StyleSheet.create({
  img: {
    width: 190,
    height: 250,
    flex: 1,
  },
  renderItem: {
    alignItems: 'center',
    marginLeft: 'auto',
    marginEnd: 'auto',
    marginBottom: 30,
  },
})

export { PhotoList };

Answer 1

Today I already answered this question in the chat, create a state, and in the return instead of the View modal with flex: 1, inside the picture is natural. And depending on the state, track and render either the first view with a flatlist or the second one with a square