Header and Footer not rendering

[kmcgill88]

Great library! The demo shots in README show a header and footer for one, which I'm interested in. I started playing with it and realized the header and footer are not being rendered. I ran it locally as well as tried the Expo demo. I am a RN n00b but will see if I can't figure it out. The only warning I saw so far was:

Any ideas?

[brh55]

Hey @kmcgill88, do you have a code sample of the data being passed to the component?

[kmcgill88]

Its the same as your demo, I just cloned. I just confirmed this isn't rendering on the Android emulator either.

// list of images
const data = [
  {
    data: {
      caption: 'Summer Recipies',
      user: {
        name: 'Henry'
      },
    },
    uri: 'https://s-media-cache-ak0.pinimg.com/736x/32/7f/d9/327fd98ae0146623ca8954884029297b.jpg',
    renderFooter: (data) => {
      return (
        <View key='brick-header' style={{backgroundColor: 'white', padding: 5, paddingRight: 9, paddingLeft: 9}}>
          <Text style={{lineHeight: 20, fontSize: 14}}>{data.caption}</Text>
        </View>
      )
    },
    renderHeader: (data) => {
      return (
        <View key='brick-footer' style={styles.headerTop}>
          <Image
            source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsO3JMW5pmK-pq9g3T-1znMMK8IEELKnasQ6agJANePV7Z0nwp9w' }}
            style={styles.userPic}/>
          <Text style={styles.userName}>{data.user.name}</Text>
        </View>
      )
    }
  },
  {
    uri: 'https://s-media-cache-ak0.pinimg.com/736x/b1/21/df/b121df29b41b771d6610dba71834e512.jpg'
  },
  {
    uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQpD8mz-2Wwix8hHbGgR-mCFQVFTF7TF7hU05BxwLVO1PS5j-rZA'
  },
....

[kmcgill88]

I'm using:

NPM: 5.3.0 with same dependencies you have in your package.json

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.43.0",
    "react-native-masonry": "^0.1.0"
  },

All I did is clone, cd to example folder and read npm install then react-native run-ios

Any idea @brh55 ?

[brh55]

Use react-native-masonary ^v0.2.0, the render header and footer was implemented v0.2.0+. Also could use a PR to fix the packagr.json file 🙂

[kmcgill88]

@brh55 PR #37 should do the trick. Thanks!

[brh55]

@kmcgill88 Thanks!