This is an Example of Grid Image Gallery in React Native | API Call img url

ImageGallery.jsx

/*This is an Example of Grid Image Gallery in React Native*/
import * as React from 'react';
//import React in our project
import {
  Image,
  TouchableOpacity,
  Text,
  View,
  Modal,
  StyleSheet,
} from 'react-native';
//import all the needed components

import PhotoGrid from 'react-native-image-grid';

class App extends React.Component {
  constructor() {
    super()
    this.state = {
    	 ModalVisibleStatus: false,
      dataSource: [],
      uri:'',
    }
  }

  componentDidMount() {
      const url = 'http://burner.ahnv.me/api';
    fetch(url)
    .then((response)=>response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.items
      })
      .catch((error) => {
        console.log(error)
      })
    })
    
  }
  renderHeader() {
    //Header of the Screen
    return <Text style={{padding:16, fontSize:20, color:'white', backgroundColor:'black'}}>TechBurner Selected Wallpapers</Text>;
  }
  ShowModalFunction(visible, imageUrl) {
    //handler to handle the click on image of Grid
    //and close button on modal
    this.setState({
      ModalVisibleStatus: visible,
      uri: item.imageUrl
    });
  }

  renderItem(item, itemSize, itemPaddingHorizontal) {
    //Single item of Grid
    return (
      <TouchableOpacity
        key={item.id}
        style={{
          width: itemSize,
          height: itemSize,
          paddingHorizontal: itemPaddingHorizontal,
        }}
        onPress={() => {
        	//error
        	 this.ShowModalFunction(this.state.ModalVisibleStatus,'');
        }}>
        <Image
          resizeMode="cover"
          style={{ flex: 1 }}
          source={{uri: item.imageUrl}}
        />
      </TouchableOpacity>
    );
  }

  render() {
    if (this.state.ModalVisibleStatus) {
      //Modal to show full image with close button 
      return (
        <Modal
          transparent={false}
          animationType={'fade'}
          visible={this.state.ModalVisibleStatus}
          onRequestClose={() => {
            this.ShowModalFunction(!this.state.ModalVisibleStatus,'');
          }}>
          <View style={styles.modelStyle}>
            <Image
              style={styles.fullImageStyle}
              source={{uri: item.imageUrl}}
            />
            <TouchableOpacity
              activeOpacity={0.5}
              style={styles.closeButtonStyle}
              onPress={() => {
                this.ShowModalFunction(!this.state.ModalVisibleStatus,'');
              }}>
              <Image
                source={{
                  uri:
                    'https://aboutreact.com/wp-content/uploads/2018/09/close.png',
                }}
                style={{ width: 25, height: 25, marginTop:16 }}
              />
            </TouchableOpacity>
          </View>
        </Modal>
      );
    } else {
      //Photo Grid of images
      return (
        <View style={styles.containerStyle}>
        <PhotoGrid
          data={this.state.dataSource}
          itemsPerRow={2}
          itemMargin={1}
          itemPaddingHorizontal={1}
          renderHeader={this.renderHeader}
          renderItem={this.renderItem}
        />
        </View>
      );
    }
  }
}

export default App;
const styles = StyleSheet.create({
  containerStyle: {
    justifyContent: 'center',
    flex: 1,
    marginTop: 20,
  },
  fullImageStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '98%',
    resizeMode: 'contain',
  },
  modelStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  closeButtonStyle: {
    width: 25,
    height: 25,
    top: 9,
    right: 9,
    position: 'absolute',
  },
});