diffrent sizes grid doesn't work good

[IcarusFal]

Hi I am try'n to make a FlatList with react-native-responsive-grid to have items with diffrent sizes , but it doesn't work the way it must. this is the code `import React from 'react';

import { View, Text, Image, StyleSheet, ScrollView, ImageBackground, FlatList, Dimensions, } from 'react-native';

import {Row, Column, ScreenInfo, Grid} from 'react-native-responsive-grid';

const screenWidth = Math.round(Dimensions.get('window').width); const screenWidthL = screenWidth / 2.1; // column width (relative to screen size) const sizes = {sm: 100, md: 50, lg: 25, xl: 20};

const layout = (state) => { const numCols = Math.floor(100 / sizes[ScreenInfo().mediaSize]); const numRows = Math.ceil(data.length / numCols); const colWidth = state.layout.grid ? screenWidthL : 0;

let layoutMatrix = [], layoutCols = [];

for (let col = 0; col < numCols; col++) { layoutMatrix.push([]); for (let row = 0, i = col; row < numRows; row++, i += numCols) { if (data[i]) layoutMatrix[col].push( <Item key={i} id={i} url={data[i].url} height={data[i].pixelHeight} width={data[i].pixelWidth} margin={2} colWidth={colWidth} state={state} />, ); } layoutCols.push( <Column key={col} smSize={state.layout.grid ? sizes.sm : 0} mdSize={state.layout.grid ? sizes.md : 0} lgSize={state.layout.grid ? sizes.lg : 0} xlSize={state.layout.grid ? sizes.xl : 0}> {layoutMatrix[col]} , ); }

return layoutCols; }; const dd = []; const Item = (props) => { if (!props.colWidth) return null;

dd.push({ key: props.key, id: props.id, urlimg: props.url, height: props.height, width: props.width, margin: props.margin, colWidth: props.colWidth, });

return ( <FlatList numColumns={2} data={dd} renderItem={({item, index}) => { return ( <Row style={{ backgroundColor: 'white', margin: item.margin, borderRadius: 15, borderWidth: 1, borderColor: 'black', height: item.height, }}>

{item.id_}

      </Row>
    );
  }}></FlatList>

); };

export const Home = () => (

{({state, setState}) => ( {layout(state)} )}

);

const data = [ { url: 'https://i.pinimg.com/236x/d8/3a/9b/d83a9b6faf2e58ff895342242bd62214.jpg', pixelHeight: screenWidthL + 30, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/61/35/93/613593ea3d5537c7f85f7365f0d72f45.jpg', pixelHeight: screenWidthL, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/52/7c/66/527c66879c1bbbeaf53938e467ee8927.jpg', pixelHeight: screenWidthL + 10, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/16/8e/1e/168e1e2ba9e74baf37e1c64df576b79c.jpg', pixelHeight: screenWidthL + 5, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/22/0f/01/220f016c154044a51abca097f7ecc4ea.jpg', pixelHeight: screenWidthL, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/14/3a/8c/143a8c283ecaecbf90058ac0f914a1ed.jpg', pixelHeight: screenWidthL + 20, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/3d/65/6f/3d656f63189290a84d906b92d0d1565d.jpg', pixelHeight: screenWidthL + 15, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/7a/2c/f2/7a2cf28357e37a95dfac3d273ef9cb0a.jpg', pixelHeight: screenWidthL, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/d8/3a/9b/d83a9b6faf2e58ff895342242bd62214.jpg', pixelHeight: screenWidthL + 15, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/61/35/93/613593ea3d5537c7f85f7365f0d72f45.jpg', pixelHeight: screenWidthL, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/52/7c/66/527c66879c1bbbeaf53938e467ee8927.jpg', pixelHeight: screenWidthL + 10, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/16/8e/1e/168e1e2ba9e74baf37e1c64df576b79c.jpg', pixelHeight: screenWidthL + 5, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/22/0f/01/220f016c154044a51abca097f7ecc4ea.jpg', pixelHeight: screenWidthL, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/14/3a/8c/143a8c283ecaecbf90058ac0f914a1ed.jpg', pixelHeight: screenWidthL + 20, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/3d/65/6f/3d656f63189290a84d906b92d0d1565d.jpg', pixelHeight: screenWidthL + 15, pixelWidth: screenWidthL, }, { url: 'https://i.pinimg.com/236x/7a/2c/f2/7a2cf28357e37a95dfac3d273ef9cb0a.jpg', pixelHeight: screenWidthL, pixelWidth: screenWidthL, }, ]; ` and

what I'm doing wrong?

[idibidiart]

A working example is given in the Readme:

https://github.com/idibidiart/react-native-responsive-grid/blob/master/UniversalPinterestLayout.md

Closing unless the working example no longer works, in which case please let us know, Thanks.