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

Answer 1

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.