Render two items (images) side by side in a list view in react native

Karan Gujral Published at Dev

Karan Gujral

I'm trying to design something like the below screenshot in react native. Please note each tile is a Product element fetched from the backend.

But I'm unable to do this using a ListView and its renderRow method which is denying me to use any kind of InfiniteScroll Components.

Currently I'm running a loop with 2 elements at a time and rendering 2 elements inside a scroll view. Below is my Code to explain better.

render() {
    var elem = [];
    for(var i = 0; i < this.state.products.length; i+=2) {
      var prod = this.state.products[i];
      var prod2 = this.state.products[i + 1];
      elem.push(
        <View style={styles.view} key={i} >
          <ProductTile onPressAction={this._pdpPage} prod={prod} index={i} />
          <ProductTile onPressAction={this._pdpPage} prod={prod2} index={i + 1} />
        </View>
      );
    }
    return (
        <ScrollView>
          {elem}
        </ScrollView>
    )
}

And then based on the index prop I'm aligning the elements on left or right. My View style looks like below:

view: {
  flex: 1,
  flexDirection: 'row',
},

Please suggest a better way to do this.

Thanks in advance.

Nader Dabit

A good way we have done this in production in the past, and it has worked out well, is to get the width of the container and set the width of the cards to 50% of the width, then you can just push all of the single elements into the listview. Also, be sure to set up a flexWrap of wrap.

This will work across all device sizes, and requires not additional modules or libraries.

Check out the sample code below and example here:

https://rnplay.org/apps/t_6-Ag

/* Get width of window */
const width = Dimensions.get('window').width

/* ListView */
<ListView
  contentContainerStyle={styles.listView}
  dataSource={this.state.dataSource}
  renderRow={this.renderRow.bind(this)}
/>

/* Row */
renderRow () {
  return <View style={styles.card}>
           <Text>{rowData.name} {rowData.price}</Text>
         </View>

/* Styles */
listView: {
  flexDirection: 'row',
  flexWrap: 'wrap'
},
card: {
  backgroundColor: 'red',
  width: (width / 2) - 15,
  height: 300,
  marginLeft: 10,
  marginTop: 10
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-28

Comments

0 comments

From Dev

Related Related

Article

Render two items (images) side by side in a list view in react native

Render two items (images) side by side in a list view in react native

Aligning items of a list in the right side

Plot two images side by side with skimage

Getting two images to show side by side, with some complications

Centering two images side-by-side with captions

Render React JS server side using .net

Align two images side by side

How to get rid of the dots on the side of list items?

React-router unable to render on server side

How to render two pd.DataFrames in jupyter notebook side by side?

React Native View Render

Plotting two images side by side in python

Two images side by side and responsive

Position images side by side

React Native list view does not render whole list

List of items from the inverside side of a ManyToOne relationship

SwiftUI - place two list side-by-side

Two divs side by side

Two buttons side by side

How to view two PDF files side-by-side in Foxit?

Adding images to a table view on left side

How do I put two or more images side by side in HTML?

Placing to List Items side by side in android ListView

list items along side images in navigation bar

React Native list view does not render whole list

how to arrange 2 images side by side in mobile view?

React Context undefined in Server Side Render

How to position two images side by side in svg

Flex: Align two items side by side without max width

How to render items in two columns in react native?