REACT NATIVE - Simple Flat List with Grid

 //import liraries

import React, {Component} from 'react';

import {View, Image,FlatList, StyleSheet, SafeAreaView,StatusBar} from 'react-native';

const DATA=

[{"id":"4eh","url":"https://cdn2.thecatapi.com/images/4eh.jpg","width":720,"height":540},{"id":"7i1","url":"https://cdn2.thecatapi.com/images/7i1.jpg","width":600,"height":900},{"id":"9oo","url":"https://cdn2.thecatapi.com/images/9oo.jpg","width":537,"height":720},{"id":"9ss","url":"https://cdn2.thecatapi.com/images/9ss.jpg","width":600,"height":897},{"id":"bi2","url":"https://cdn2.thecatapi.com/images/bi2.jpg","width":500,"height":666},{"id":"bjr","url":"https://cdn2.thecatapi.com/images/bjr.jpg","width":375,"height":500},{"id":"chc","url":"https://cdn2.thecatapi.com/images/chc.gif","width":500,"height":417},{"id":"ddp","url":"https://cdn2.thecatapi.com/images/ddp.jpg","width":612,"height":612},{"id":"MTkwMTQ2OQ","url":"https://cdn2.thecatapi.com/images/MTkwMTQ2OQ.jpg","width":819,"height":1024},{"id":"MjAyMTk2MQ","url":"https://cdn2.thecatapi.com/images/MjAyMTk2MQ.jpg","width":1200,"height":800}];

// create a component

const ImageFlatList = () => {

//const [dataSource, setDataSource] = useState(DATA);

return (

<SafeAreaView style={styles.container}>

<FlatList

data={DATA}

renderItem={({item}) => (

<View

style={{

flex: 1,

flexDirection: 'column',

margin: 1,

}}>

<Image style={styles.imageThumbnail} source={{uri: item.url}} />

</View>

)}

//Setting the number of column

numColumns={2}

keyExtractor={(item, index) => index.toString()}

/>

</SafeAreaView>

);

};

// define your styles

const styles = StyleSheet.create({

container: {

flex: 1,

marginTop: StatusBar.marginTop || 0,

},

imageThumbnail: {

justifyContent: 'center',

alignItems: 'center',

height: 200,

padding:1,

margin:2

},

});

//make this component available to the app

export default ImageFlatList;

Screenshot