Increase space between Bricks

[aravindhrbt]

Hi, Is there any way to increase space around bricks i.e space between/around each bricks.

masonry column = 2 I tried by changing column.js file const gutterBase = width / 100; const gutterSize = gutterBase * 5;

it creates gap between 2 column but the image inside the column is not shown fully. ---Help Wanted.

[brh55]

Do you have screenshots? You are right to increase the multiplier, that is how I would increase spacing around bricks.

[aravindhrbt]

Hi @brh55

i got some workaround to get space between cells

by editing _resizeByColumns function,

  const gutterSize = gutterBase * 5;  // 1 change to 5 change by myself
    // return width-20 so that space around the image is rendered and in brick alignItems to center
    return { width: newWidth-20, height: newHeight, gutter: gutterSize };

and also i included margin vertical to 7 for brick content and resizeMode='contain' in image

  <Image
        key={image.uri}
        source={{ uri: image.uri }}
        resizeMethod='auto'
        resizeMode='contain'
        style={{ width: image.width, height: image.height, marginTop: gutter}} />

this thing helps me to come up with a solution for my scenario. may be helpful to someone who need this.

[aravindhrbt]

Hi @brh55

i faced one issue (not sure may i need some help) i have 2 api call each returns 25 object i format the object for passing it to masonry view

dummyArray=[some array which holds the data formatted for bricks]
this.setState({
             brickData:[...this.state.brickData, ...dummyArray]
            })

<Masonry
              bricks={this.state.brickData}
              columns={this.state.columns}/>

so on 1st api call i have 25 object for bricks (eg:[a,b,c,....]) (i logged brickdata value in render method) and after 2nd api call success i have 50 objects for bricks (eg:[a,b,c,....,1,2,3]), but in ui, i have repeated data from 1st object([a,b,c,...a,b,c,.....1,2,3]) consloe.log(brick data) gives 50 objects but ui renders more than 75 objects in total.the old data still remains and new data get appended as bricks any solution to overcome this.

Thanks Aravindh

[brh55]

@aravindhrbt can you re-open ticket with description if you are having same issue. Going to close this to help others who be having spacing issues.