How can i made gird view 3 row with content wrap @shoutem/ui

Question

Hey guys i try used list view @shoutem/ui and have issue with that! Here is my code to renderRow

renderRow(rowData, sectionId, index) {
        const cellViews = rowData.map((channel, id) => {
            return (
                <TouchableOpacity key={id} styleName="flexible">
                    <Tile styleName="small clear">
                        <Image
                            styleName="medium-square rounded-corners"
                            source={{ uri: channel.defaultImage }}
                        />
                        <View styleName="content">
                            <Subtitle numberOfLines={3}>{channel.name}</Subtitle>
                            <View styleName="horizontal">
                                <Caption styleName="collapsible" numberOfLines={2}>{channel.status}</Caption>
                            </View>
                        </View>
                    </Tile>
                </TouchableOpacity>
            );
        });
        return (
            <GridRow columns={3}>
                {cellViews}
            </GridRow>
        );
    }

and at function render() i define 1 groupedData like: const groupedData = GridRow.groupByRows(this.state.dataArr, 3);

But my result work not well! Image in row conflict with near row Like this image! Pls help me some solution can fix this! I try all style of image in tutorial but still not work :( Here is my facing:

enter image description here

score 2 · Accepted Answer · answered Apr 26 '17 at 05:43

2

It is better to set width and height to your item.

For example, style={{width : screenWidth / 3, height: screenWidth / 3 }}.

Gridview will not implement a horizontal scroll view for you by default, so when your total width exceed the screenWidth , they will be in conflict.

Another method maybe works: You could regard each row as another listview to render, but I did not have a try.

answered Apr 26 '17 at 05:43

yifan_z

256
1
10

i did it before and it work! Anyway thanks you so much @yifan_z – Chu Việt Hưng Apr 26 '17 at 07:05

score 0 · Answer 2 · answered Apr 26 '17 at 09:37

The problem is because you use "medium-square" styleName on Image. That styleName define Image height and width explicitly to 145 pixels. So if your screen has the width less than 435, images would overlap. The solution suggested above is right or you can use some other styleName that would render smaller images, for example, "small".

How can i made gird view 3 row with content wrap @shoutem/ui

2 Answers2