How to render Data According to Column in flat list in react native

Question

I have Columns named , ProductInfo. and Infront of this column I want to render seller response For That specific product. and also I The heading Should Not be render in each row just on top of each seller response column is enough. Look In the data For Buyer 1 I have 2 sellers, for buyer 2 I have 4 seller and so on.. but In my output I am only getting 1 seller in front of each buyer

see expo snack also for more info - https://snack.expo.dev/@sohilshaikh/flatlist

Here is my code

import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Button,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  StatusBar,
  FlatList,
} from 'react-native';


const sample = [
  {id: 1, buyerId: 1, name: 'sohil', sellerId: 1, sellerId: 2},
  {id: 2, buyerId: 2, name: 'sohil',sellerId: 1, sellerId: 2,sellerId: 3, sellerId: 4},
  {id: 3, buyerId: 3, name: 'sohil',sellerId: 1, sellerId: 2},
  {id: 4, buyerId: 4, name: 'sohil', sellerId: 1, sellerId: 2},
  {id: 5, buyerId: 5, name: 'sohil',sellerId: 1, sellerId: 2,sellerId: 3, sellerId: 4,sellerId: 5, sellerId: 6},
  {id: 6, buyerId: 6, name: 'sohil',sellerId:1},
];

const RFQnotificationBuyer = (props, {navigation}) => {
  const [DataForEnquiry, setDataForEnquiry] = useState(sample);

  const itemView = ({item}) => {
    return (
      <View style={styles.inputsContainer}>
        <View>
          <View style={{flexDirection: 'row'}}>
            <View style={{marginTop: '2%'}}>
              <View>
                <View
                  style={{
                    width: 100,
                    height: 50,
                    justifyContent: 'center',
                    backgroundColor: '#f3f3f3',
                    alignItems: 'center',
                  }}>
                  <Text>Mobile</Text>
                </View>
              </View>


              <View style={{flexDirection: 'row', marginTop: '1%'}}>
                <View>
                  <View
                    style={{
                      width: 50,
                      height: 50,
                      justifyContent: 'center',
                      backgroundColor: '#f3f3f3',
                      alignItems: 'center',
                    }}>
                    <Text>IOS</Text>
                  </View>
                </View>

                <View style={{marginLeft: 1}}>
                  <View
                    style={{
                      width: 50,
                      height: 50,
                      justifyContent: 'center',
                      backgroundColor: '#f3f3f3',
                      alignItems: 'center',
                    }}>
                    <Text>100</Text>
                  </View>
                </View>
              </View>
            </View>

            <ScrollView horizontal>
              {!item.sellerId || (
                <View style={{flexDirection: 'row'}}>
                  <View style={{marginLeft: 10}}>
                    <Text>Seller Profile</Text>
                    <Text>View Remark</Text>
                    <Text>Unit/Price</Text>
                    <View
                      style={{
                        width: 60,
                        height: 50,
                        justifyContent: 'center',
                        backgroundColor: '#f3f3f3',
                        alignItems: 'center',
                      }}>
                      <Text>{item.sellerId}</Text>
                    </View>
                  </View>
                </View>
              )}
            </ScrollView>
          </View>
        </View>
      </View>
    );
  };


  return (
    <View style={{flex: 1, backgroundColor: '#ffffff'}}>
      <StatusBar backgroundColor="#e71013" barStyle="light-content" />
      <View style={styles.container}>
    
        <View style={{height: 550}}>
          <FlatList
            data={DataForEnquiry}
            renderItem={itemView}
            showsVerticalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
          />
        </View>
</View>
      
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },

});

export default RFQnotificationBuyer;

Answer 1

You can use ScrollView to achieve that UI.

In your sample data, store all the sellerId in a single array.

Here is the finished app: Expo Snack

Output:

Full Source code:

import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  Button,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  StatusBar,
  FlatList,
} from 'react-native';

import MainBox from './MainBox';
import SecondaryBox from './SecondaryBox';
const sample = [
  { id: 1, buyerId: 1, name: 'sohil', sellerId: [1, 2] },
  {
    id: 2,
    buyerId: 2,
    name: 'sohil',
    sellerId: [1, 2, 3, 4],
  },
  { id: 3, buyerId: 3, name: 'sohil', sellerId: [1, 2] },
  { id: 4, buyerId: 4, name: 'sohil', sellerId: [1, 2] },
  {
    id: 5,
    buyerId: 5,
    name: 'sohil',
    sellerId: [1, 2, 3, 4, 5, 6],
  },
  { id: 6, buyerId: 6, name: 'sohil', sellerId: [1] },
];

const RFQnotificationBuyer = (props, { navigation }) => {
  const [dataForEnquiry, setDataForEnquiry] = useState(sample);

  return (
    <View style={{ flex: 1, backgroundColor: '#ffffff' }}>
      <StatusBar backgroundColor="#e71013" barStyle="light-content" />
      <View style={styles.container}>
        <View style={{ flexDirection: 'row' }}>
          <View>
            {sample.map((item) => (
              <MainBox />
            ))}
          </View>

          <View style={{ backgroundColor: '', flex: 1 }}>
            <ScrollView horizontal={true}>
              <View>
                {sample.map((item) => (
                  <View style={{ flexDirection: 'row' }}>
                    {item['sellerId']?.map((buyer) => (
                      <SecondaryBox sellerId={buyer} />
                    ))}
                  </View>
                ))}
              </View>
            </ScrollView>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
});

export default RFQnotificationBuyer;