CODEWITHSUNDEEP
javascriptreactjsreact-native
Alisan26
Alisan26

Reputation: 323

React native mapping element group

I have a custom card element created with View and I want mapping card element double card on one row, for example is array have 4 element 2 card items in first row other 2 card items other row so double group view per row according to the element in the array my code below is all element row

const cardView = () => {
    cardItem = [
      {title: 'Title1', value: 'val1'},
      {title: 'Title2', value: 'val2'},
      {title: 'Title3', value: 'val3'},
      {title: 'Title4', value: 'val4'},
    ];
    return (
      <View style={{marginHorizontal:5}}>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
          {cardItem.map((item, i) => {
            return (
              <View style={styles.cardInner}>
                <Text text={item.title} />
                <Text text={item.value} />
              </View>
            );
          })}
        </View>
      </View>
    );
  };

Upvotes: 0

Views: 177

Answers (3)

Sameer Kumar Jain
Sameer Kumar Jain

Reputation: 2135

To achieve the desired result, You need to define flex-wrap style on the parent container and set it to 'wrap' and then provide half-width to each child element. Here is a snippet

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
  const cardItem = [
    { title: 'Title1', value: 'val1' },
    { title: 'Title2', value: 'val2' },
    { title: 'Title3', value: 'val3' },
    { title: 'Title4', value: 'val4' },
  ];
  return (
    <View style={styles.container}>
      {cardItem.map((item, i) => {
        return (
          <View style={styles.cardInner}>
            <Text>{item.title}</Text>
            <Text>{item.value}</Text>
          </View>
        );
      })}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    width: '100%',
    flexWrap: 'wrap',
    padding: 8,
  },
  cardInner: {
    width: '50%'
  },
});

Snack: https://snack.expo.io/@saachitech/dcffc0

more info about flex box and flex wrap property https://reactnative.dev/docs/flexbox#flex-wrap

Upvotes: 1

Vladim&#237;r
Vladim&#237;r

Reputation: 759

You can do it like this:

const cardView = () => {
  cardItem = [
    { title: 'Title1', value: 'val1' },
    { title: 'Title2', value: 'val2' },
    { title: 'Title3', value: 'val3' },
    { title: 'Title4', value: 'val4' },
  ];

  mappedCards = cardItem.map((item) => {    
    return (
      <Text text={item.title} />
    )
  })


  return (
    <View style={{ marginHorizontal: 5 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={styles.cardInner}>
          {mappedCards}
        </View>
      </View>
    </View>
  );
};

Upvotes: 0

id1
id1

Reputation: 221

Like use react-native-grid-component for similar problem. Can set custom number of elements per one row numColumns.

Example:

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import Grid from 'react-native-grid-component';

class Simple extends Component {
  _renderItem = (data, i) => (
       <View style={styles.cardInner}>
         <Text text={item.title} />
          <Text text={item.value} />
       </View>
  );

  render() {
    return (
      <Grid
        renderItem={this._renderItem}
        data={[
          {title: 'Title1', value: 'val1'},
          {title: 'Title2', value: 'val2'},
          {title: 'Title3', value: 'val3'},
          {title: 'Title4', value: 'val4'},
        ]}
        numColumns={2}
      />
    );
  }
}

const styles = StyleSheet.create({
  ...
});

Upvotes: 0

Related Questions