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.

I've just run into the same issue, did you ever find an answer to this? — Matt H, Jan 15 '16 at 15:15

ius · Answer 1 · 2017-09-17T10:58:47.813

41

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!

edited Sep 17 '17 at 10:58

answered Sep 16 '17 at 16:42

ius

1,511
2
15
31

setting the child's width to a fixed percentage helped solve my issue of getting the items to evenly take up the space, thanks! – Clinton Jan 07 '18 at 04:56
In the Child View it should be `{ flexBasis: '50%' }` not compulsory but recommended – Rajendran Nadar Mar 01 '18 at 11:20

score 4 · Answer 2 · edited Apr 16 '17 at 11:21

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!!!

Harish Pathak,please refer my question on the below link-------------https://stackoverflow.com/questions/44386595/creating-a-gridview-from-listview-in-reactnativewithout-using-libraries -------iam sure you can answer this — Amal p, Jun 08 '17 at 09:31

score 4 · Answer 3 · edited Sep 12 '18 at 10:40

You can achieve this easily by using react-native-easy-grid library.

As it is a 2X2 layout, you can use it the following way. First import the library

import {Grid,Row,Col} from 'react-native-easy-grid'

Code:

 export default class StackOverflow extends Component {
constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
        dataSource: ds.cloneWithRows(["item"])
    };
}

render() {
    return (
        <View style={{ flex: 1, padding: 50 }}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={rowData => (
                    <Grid>
                        <Row style={styles.container}>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "yellow" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "green" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                        </Row>
                        <Row style={styles.container}>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "skyblue" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "orange" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                        </Row>
                    </Grid>
                )}
            />
        </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    alignItems: "center",
    justifyContent: "center"
}
});

The result would be this :

Explaination: I created a 2X2 layout using the react-native-easy-grid library using the components Grid, Row, Col. The beauty is you need not even mention any flexDirection attributes, it just works. Then, I passed this component to the renderRow prop of ListView element.

Just tweak the data source array according to your data, and change the required col with the index of the array e.g. : {rowData[1] } — BK7, Jun 08 '17 at 09:33
https://stackoverflow.com/questions/44386595/creating-a-gridview-from-listview-in-reactnativewithout-using-libraries--------- please answer my question on this link — Amal p, Jun 08 '17 at 09:35

score 2 · Answer 4 · edited Jul 03 '17 at 13:20

2

try setting the same flex value on both items so they would grow equally

edited Jul 03 '17 at 13:20

Loofer

6,841
9
61
102

answered Jun 03 '15 at 13:44

boredgames

11,254
5
25
17

Responsive grid in React Native & Flex

4 Answers4