Quantcast
Channel: React Native FlatList with columns, Last item width - Stack Overflow
Viewing all articles
Browse latest Browse all 20

Answer by Pratik Adhikari for React Native FlatList with columns, Last item width

$
0
0

Create an array with odd number of images in it, like:

const images = [  require('./../...jpg'),  require('./../...jpg'),  require('./../...jpg'),  require('./../...jpg'),  require('./../...jpg'),];

And then, use the code given below,

const App = () => {const _renderItem = ({ item, index }) => (<Image    source={item}    style={{      width:        images.length % 2 !== 0 && images.length - 1 === index          ? '100%'          : '50%',      height: 200,    }}    resizeMode="cover"  /> );return (<View style={{flex: 1, marginHorizontal: 10,}}><FlatList        columnWrapperStyle={{ justifyContent: 'space-between' }}        data={images}        numColumns={2}        renderItem={_renderItem}      /></View>  )};export default App;

Working Example


Viewing all articles
Browse latest Browse all 20

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>