fetch image from server instead of gallery

[vishu-mangla]

how to fetch image from server instead of fetching images from gallery?
please provide a proper example
thanks in advance @Luehang

[Luehang]

Hi,

You can fetch remote and local images with react-native-image-layout or react-native-masonry-list.

The following example is for react-native-masonry-list.

🔷 Usage Example

Add an import to the top of the file. At minimal, declare the MasonryList component in the render() method providing an array of data for the images prop.

ℹ️ Local images must have a defined dimensions field with width and height.

import React from "react";
import MasonryList from "react-native-masonry-list";

export default class MasonryImages extends React.PureComponent {
render() {
    return (
        <MasonryList
            images={[
                // Can be used with different image object fieldnames.
                // Ex. source, source.uri, uri, URI, url, URL
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg" },
                { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } },
                { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
                    dimensions: { width: 1080, height: 1920 } },
                { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg"
                    id: "blpccx4cn" },
                { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
            ]}
        />
    );
}
}

If you want an image layout with gallery, then use react-native-image-layout. There will be an example given in the readme file.