the masonry view is blank when i add data to state.data

[chienvu123]

i use Example at lib, when i click push new data, view is removed

anyone help me, please!

---

i use version 0.5.0

[trungnt85]

same problem here, since I tried to load next page when grid end reached

[logicallyDimp]

I get this error on a dynamic data what I did to fix this is to rerender by using state.. so heres the thing... you need to rerender it to work

add a boolean state that changes when you add a new data to the masonry view

example when you add a data... setState({ itemsLoaded: false }); after data was added setState({ itemsLoaded: true });

if(this.state.itemsLoaded) {
      return (
        <View style={{
          flex: 1,
          padding: 10,
          paddingBottom: 80,
          backgroundColor: '#f5f6fa',
        }}>
          <Masonry
            bricks={this.state.items}
            sorted
            spacing={6}
            columns={2}
            customImageComponent={CustomImage}
            imageContainerStyle={{
              paddingTop: 10,
              backgroundColor: '#ffffff',
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10,
            }}
          />
        </View>
      );
    }
    else {
      return (
        <View>
            <Text>Loading Data..</Text>
        </View>
      );
    }

you get what I mean?

[DanthonyPabon]

@logicallyDimp it's not working for me

 if (this.state.loading) {
      return (
        <View style={styles.ClusterListBoxEmpty}>
          <ActivityIndicator animating={true} color="#242424" size="large" />
          <Text style={styles.textTitleEmpty}>
            Aquí aparecerán las fotos y videos que tomes con Picnow
          </Text>
        </View>
      );
    }
    if (Object.keys(this.state.ClusterAll).length === 0) {
      return (
        <View style={styles.ClusterListBoxEmpty}>
          <Text style={styles.textTitleEmpty}>No has tomado ninguna foto.</Text>
        </View>
      );
    } else if (Object.keys(this.state.ClusterAll).length > 0) {
      let uri = [];
      this.state.ClusterAll.map(({ view }) => {
        uri.push({ uri: view });
      });
      console.log(uri);
      return (
        <View style={styles.ClusterListBox}>
          <Masonry
            sorted
            columns={3} // optional - Default: 2
            bricks={uri}
          />
        </View>
      );
    }

[logicallyDimp]

have you tried doing it like this?

if(this.state.loading) {
	return (
		<View style={styles.ClusterListBoxEmpty}>
			<ActivityIndicator animating={true} color="#242424" size="large" />
			<Text style={styles.textTitleEmpty}>
				Aquí aparecerán las fotos y videos que tomes con Picnow
			</Text>
		</View>
	);
}
else {
	if (Object.keys(this.state.ClusterAll).length === 0) {
		return (
			<View style={styles.ClusterListBoxEmpty}>
				<Text style={styles.textTitleEmpty}>No has tomado ninguna foto.</Text>
			</View>
		);
	} else if (Object.keys(this.state.ClusterAll).length > 0) {
		let uri = [];
		this.state.ClusterAll.map(({ view }) => {
			uri.push({ uri: view });
		});
		console.log(uri);
		return (
			<View style={styles.ClusterListBox}>
				<Masonry
					sorted
					columns={3} // optional - Default: 2
					bricks={uri}
				/>
			</View>
		);
	}
}

[DanthonyPabon]

@logicallyDimp the first time it renders it does show up as masonry, but the second time it renders it does not as masonry

[Richi2293]

same thing for me, have you solved it?

[DanthonyPabon]

I don't using it

[brh55]

So I looked into this issue a while back, it really stems from an async call to load the image, but doesn't complete before the masonry view changes. This causes the masonry to run into a runtime exception and stops loading completely. If anyone wants to try to fix this to integrate cancellable async calls, this should fix the issue (almost certain).

[Abdelrahman-Nabil]

I still encounter the same issue when appending new data to the list, anyone has a quick fix to it ?