Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Simplified example renders nothing

See original GitHub issue

I have a suspicion you are assuming existence of the header/footer as your example builds/runs but when I try my simplified code I get nothing rendered.


const onPress = e => console.log(e);
const img1 = 'https://img.buzzfeed.com/buzzfeed-static/static/2014-12/1/15/enhanced/webdr02/enhanced-18393-1417466529-5.jpg';
const img2 = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXXTmdaGSOFK8iBeYqoA6_XiQGGWvu6KGnqAxXYyvJA-JKin8ImQ';
const img3 = 'https://img.buzzfeed.com/buzzfeed-static/static/2015-04/3/15/enhanced/webdr06/enhanced-24427-1428089292-2.jpg';

// And tried with flex: 1, I know container is coming up on UI, but no images. 
...render

      <View style={{height: '100%'}}>
        <Masonry
          columns={3}
          bricks={[
            { uri: img1, id: 1, onPress },
            { uri: img2, id: 2, onPress },
            { uri: img3 , id: 3, onPress}
          ]}
          />
      </View>

Issue Analytics

State:
Created 6 years ago
Comments:15 (8 by maintainers)

Top GitHub Comments

2reactions

brh55commented, Jun 21, 2017

Odd it will display if you wrap the masonry with a scrollview. I’m assuming it has to do with the listview.rowHasChanged method.

Image preview was too big lol, so here is a link: image

import React, { Component } from 'react';
import {
	ScrollView
} from 'react-native';
import Masonry from 'react-native-masonry';

const onPress = e => console.log(e);
const img1 = 'https://img.buzzfeed.com/buzzfeed-static/static/2014-12/1/15/enhanced/webdr02/enhanced-18393-1417466529-5.jpg';
const img2 = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXXTmdaGSOFK8iBeYqoA6_XiQGGWvu6KGnqAxXYyvJA-JKin8ImQ';
const img3 = 'https://img.buzzfeed.com/buzzfeed-static/static/2015-04/3/15/enhanced/webdr06/enhanced-24427-1428089292-2.jpg';


export default class example extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <ScrollView style={{backgroundColor: '#f4f4f4'}}>
        <Masonry
          columns={3}
          bricks={[
            { uri: img1, id: 1, onPress },
            { uri: img2, id: 2, onPress },
            { uri: img3 , id: 3, onPress}
          ]}
          />
      </ScrollView>
    );
  }
}

1reaction

fxfactorialcommented, Jun 21, 2017

No, none, would have mentioned it.