Not rendering data in two columns

[paraswatts]

I am using this library in one of my projects. Earlier I was using flatlist. I am displaying data in 2 columns. But when I use this library data is only display in one column.

`

                    <MasonryList
                        onRefresh={this.state}
                        data={this.state.postsArray}
                        renderItem={this.renderRowItem}
                        getHeightForItem={({ item }) => item.height + 2}
                        numColumns={2}
                        keyExtractor={this._keyExtractor}

                    />`

`renderRowItem = (itemData) => {

    console.log("Image url" + itemData.item.type);
    if (itemData.item.type === 'image') {
        console.log("Flatlist Image");
        return (
            <View style={styles.row}>
                <Image source={{ uri: itemData.item.url }} style={[styles.image]} />
                <View style={{ backgroundColor: 'white', padding: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around',borderTopColor: '#eaeaea',
                borderTopWidth: 1, }}>
                    <View style={styles.iconCountContainer} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }}>
                        <Icon active name="favorite" style={styles.like} size={14} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }} />
                    </View>
                    <View style={styles.iconCountContainer} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })}>
                        <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
                    </View>
                </View>
            </View>
        )
    }
    else if (itemData.item.type === 'video') {
        console.log("Flatlist Video");
        return (
            <View style={styles.row}>
                <VideoPlayer video={{ uri: itemData.item.url }} style={[styles.video]} />
                <View style={{ backgroundColor: 'white', padding: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' ,borderTopColor: '#eaeaea',
 borderTopWidth: 1,}}>
                    <View style={styles.iconCountContainer} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }}>
                        <Icon active name="favorite" style={styles.like} size={14} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }} />
                    </View>
                    <View style={styles.iconCountContainer} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })}>
                        <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
                    </View>
                </View>
            </View>
        )
    }

    else if (itemData.item.type === 'blog') {
        console.log("Flatlist Blog");
        return (
            <View style={styles.blog}>
                <Image source={{ uri: itemData.item.url }} style={[styles.image]} />
                <View style={{ flexDirection: 'column',width:162.5}}>
                    <Text style={{textAlign: 'center'}}>{itemData.item.text}</Text>
                </View>
                <View style={{ backgroundColor: 'white', padding: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
                    <View style={styles.iconCountContainer} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }}>
                        <Icon active name="favorite" style={styles.like} size={14} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }} />
                    </View>
                    <View style={styles.iconCountContainer} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })}>
                        <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
                    </View>
                </View>
            </View>
        )
    }

    else if (itemData.item.type === 'audio') {
        console.log("Flatlist Audio");
        return (
            <View style={[styles.row]}>
                <View style={styles.audio}>
                    <Player  url={"http://lacavewebradio.chickenkiller.com:8000/stream.mp3"} />
                </View>
                <View style={{ backgroundColor: 'white', padding: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
                    <View style={styles.iconCountContainer} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }}>
                        <Icon active name="favorite" style={styles.like} size={14} onPress={() => { ToastAndroid.show('Liked', ToastAndroid.SHORT); }} />
                    </View>
                    <View style={styles.iconCountContainer} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })}>
                        <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
                    </View>
                </View>
            </View>
        )
    }
}`

This is stylesheet content for above components

image: { height: 200, width: 150, resizeMode: 'cover', borderTopLeftRadius: 3, borderTopRightRadius: 3, }, video: { height: 200, width: 150, borderTopLeftRadius: 3, borderTopRightRadius: 3, }, audio: { height: 200, width: 150, borderTopLeftRadius: 3, borderTopRightRadius: 3, }, row: {

    marginTop:10,
    marginRight:10 ,
    borderRadius: 3,
    backgroundColor: '#fff',
    shadowColor: '#303030',
    shadowOffset: {
        width: 0,
        height: 2
    },
    shadowOpacity: 0.1
},
blog: {
    marginTop:10,
    marginRight: 10,
    borderRadius: 3,
    backgroundColor: '#fff',
    shadowColor: '#303030',
    shadowOffset: {
        width: 0,
        height: 2
    },
    shadowOpacity: 0.1
},

[paraswatts]

Problem solved. My item height was getting undefined thats why data was displayed in only one column.

[hippycore]

What to do in a case dynamic height of item?

[paraswatts]

In my case also height of the components is dynamic. I have images, videos, blogs and articles in my list. I passed 300 to the prop getHeightForItem and it worked. Some of the items have height greater than 300, but it is working.

[marvesimate]

@paraswatts how did you manage to load the videos in your app