Responsive grid in React Native & Flex

Question

I'm want to create the simplest two column grid ListView

item | item
item | item

I saw this post about creating the grid and that worked - ListView grid in React Native

I couldn't understand how to make my grid responsive? How can I set the size of the item to 50%?

I know it is a new language but I wish it could have some more detailed guides / documents.

Answer 1

I just had to do that and I could solve it with simple react Views and the flexWrap rule.

Parent view

{ flex: 1, flexDirection: 'row', flexWrap: 'wrap'}

Child View (Items)

{ width: '50%' }

Hope that this might help someone!

Answer 2

It's very simple, Use flex box, In your render method return view contains rows, and use for loop for putting data.

const rowData=[];

render() {
    return <View style={styles.container}>{rowData}</View>;
}

for (let objectData of newArray) {
    rowData.push(this.renderRowView(objectData));
}

renderRowView(objectData) {
    return(
        <View style={styles.mainContainer}>
            <View style={styles.leftView}></View>
            <View style={styles.rightView}></View>
       </View>
   );
}

const styles = StyleSheet.create({
    mainContainer: {
        flex:1,
    },
    leftView: {
        flex:1,
    },
    rightView: {
        flex:1,
    }
});

I have not run this code but hope it works for you!!!