CODEWITHSUNDEEP
javascriptreactjsreact-nativeflexbox
Serenity
Serenity

Reputation: 4054

show 2 items per row[react native]

I am learning react native and in all the tutorials i see ListView has been used with only 1 items per row. I have not used ListView, though. I have only 6 items that has to be shown as flat grid with 2 items per row and should be responsive. I know its a basic question, but i have tried from my side too which can be seen in the image

enter image description here

This is my code

 renderDeviceEventList() {
    return _.map(this.props.deviceEventOptions, deviceEventOption => (
        <View key={deviceEventOption.id}>
            <Icon
                name={deviceEventOption.icon_name}
                color="#ddd"
                size={30}
                onPress={() =>
                    this.props.selectDeviceEvent(deviceEventOption)
                }
            />
            <Text style={{ color: "#ff4c4c" }}>
                {deviceEventOption.icon_name}
            </Text>
        </View>
    ));
}
render() {
    return (
        <View
            style={{
                flex: 1,
                top: 60,
                flexDirection: "row",
                justifyContent: "space-around",
                flexWrap: "wrap",
                marginBottom: 10
            }}
        >
            {this.renderDeviceEventList()}
        </View>
    );
}

Upvotes: 35

Views: 75798

Answers (6)

nikk wong
nikk wong

Reputation: 8670

The correct way to do it would be with flexBasis, with a value set to (1/n)% where n is the desired # of rows > 0. For two rows:

.parent {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row'
}
.child {
    flexBasis: '50%'
}

Upvotes: 54

Bruno Gomes
Bruno Gomes

Reputation: 1

flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'

Try to put this!

Upvotes: 0

Thanmai C
Thanmai C

Reputation: 761

You can try the flat list from react native. where in you can specific the number of columns and also can mention the vertical direction or horizontal direction. Sample code:

<FlatList
data={this.props.data}
keyExtractor={this._keyExtractor}     //has to be unique   
renderItem={this._renderItem} //method to render the data in the way you want using styling u need
horizontal={false}
numColumns={2}
          />

Refer https://facebook.github.io/react-native/docs/flatlist.html for more.

Upvotes: 32

Hern&#225;n Albertario
Hern&#225;n Albertario

Reputation: 930

You can use a FlatList and set to it the numColumns={2} prop and style={{ flexDirection: 'column' }}. In my case I'm working with 3 cols: FlatList with numColumns={3}

Upvotes: 5

vtisnado
vtisnado

Reputation: 500

If you want to make the grid view trully responsive about the device width import Dimesions:

import {
  StyleSheet,
  Text,
  ...
  Dimensions,
} from 'react-native';

And change the gridItem width for this:

gridItem: {
  margin: 5,
  width: Dimensions.get('window').width / 2.2, //Device width divided in almost a half
  height: 150,
  justifyContent: 'center',
  alignItems: 'center',
},

Also you can change the image width to be the same or less as the gridItem.

Upvotes: 7

leo7r
leo7r

Reputation: 10588

To make a 2 row grid using ListView you could use this code as an example:

renderGridItem( item ){
    return (<TouchableOpacity style={styles.gridItem}>
        <View style={[styles.gridItemImage, justifyContent:'center', alignItems:'center'}]}>
            <Text style={{fontSize:25, color:'white'}}>
                {item.fields.name.charAt(0).toUpperCase()}
            </Text>
        </View>
        <Text style={styles.gridItemText}>{item.fields.name}</Text> 
    </TouchableOpacity>
    );
}

renderCategories(){

    var listItems = this.dsinit.cloneWithRows(this.state.dataSource);

    return (
        <ScrollView style={{backgroundColor: '#E8E8E8', flex: 1}} >
            <ListView 
                contentContainerStyle={styles.grid}
                dataSource={listItems}
                renderRow={(item) => this.renderGridItem(item)}
            />
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    grid: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1,
    },
    gridItem: {
        margin:5,
        width: 150,
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
    },
    gridItemImage: {
        width: 100,
        height: 100,
        borderWidth: 1.5, 
        borderColor: 'white',
        borderRadius: 50,
    },
    gridItemText: {
        marginTop: 5,
        textAlign:'center',
    },
});

Change styles to choose how many rows you want to see on screen. This code is responsive.

Upvotes: 15

Related Questions