We Keep Coding

Is there any way to load large amount of data in React-Native?

is there any way to render large amount of data (data might be more than 15mb) each item is a card which is selectable
, while rendering data , its loads data in list but not able to select and sometimes crashes the app
i have used tried with FlatList VirtualizedList
<VirtualizedList
initialNumToRender ={3}
windowSize={10}
data={cl?.family_Details}
keyExtractor={(item, index) => item?.LoginCode}
renderItem={({ item, index }) => (
<Card />
)}
getItem={(data, index) => data[index]}
getItemCount={data => data.length}
onEndReachedThreshold={0.5}

how implement lazy loading material table react

hi i want to ask how to implement material table with lazy loading ? is that possible?
currently im using pagination button but customer want to change to via scroll.or maybe it can implement both.
<MaterialTable
components={{
Cell: props => (
<MTableCell
onDragStart={e => e.preventDefault()}
onContextMenu={e => {
handleEvent(e, props.rowData.tableData.id, props.rowData);
}}
{...props}
/>
),
//current custom pagination via button
Pagination: MTprops => (
<TablePagination
{...MTprops}
count={props.pageCount.total}
page={props.pageCount.current}
rowsPerPage={props.pageCount.limit}
onChangePage={(e, newPageNumber) => handlePageChange(e, newPageNumber, MTprops)}
onChangeRowsPerPage={(e) => {handleRowsPerPageChange(e, MTprops); }}
ActionsComponent={TablePaginationActions}
/>
),
Container: props => <Paper {...props} elevation={0} />
}}

Is there a React higher order component to replace someData.map(functionReturningComponent)?

I find code like this to be hard to read:
<Row>
<Column>
{someData.map((value, idx) => (
<Component key={idx}>
<ChildComponent value={value.foo}/>
<ChildComponentTwo value={value.bar}/>
</Component>
)}
</Column>
</Row>
Is there a HOC to replace Array.prototype.map? Say, List that takes a component and generates N components given an array of N items of data mappable to the props of the passed-in component?
declare const data: {value:string}[]
const MyComponentList = List(MyComponent)
<Row>
<Column>
<MyComponentList data={data}/>
</Column>
</Row>
and then Component = ({foo, bar}) => (<>
<ChildComponent value={foo}/>
<ChildComponentTwo value={bar}/>
</>)
Now I don't need map anywhere except I guess in the definition of List. The JSX is much easier to read. But when I search things like "HOC react replace array map JSX" I don't find anything. I suppose List should also inject key={idx} into the "child" components where idx comes from dataArray.map(dataToGoToChild, idx) => <ChildComponent key={idx} {...dataToGoToChild}/>

React with AntDesign Lists and Firebase Firestore Data

I'm trying to figure out how to present data from firestore in a react app, using Ant Design's List.
The List is set up like so:
const data = [
{
title: 'Ant Design Title 1',
},
<List
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={{item.title}}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>
I want to try to put firebase data into the const data - so that the title can be a user.name.
In my component I have:
{loading && <div>Loading ...</div>}
{users.map(user => (
<li key={user.uid}>
I'm trying to convert this to work with Ant Design's list like so:
const data = [
{
//title: `{user.name}`,
title: {user.name},
}
];
<List
itemLayout="horizontal"
dataSource={data}
renderItem={users.map(user => (
// renderItem={item => (
<List.Item>
<List.Item.Meta
// avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={item.title}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
))}
/>
When I try this, I get an error that says:
TypeError: renderItem is not a function
Is there an example of how to put data into an Ant Design list using react?

If your firebase users source is an array of objects then just add it directly to dataSource prop.
<List
itemLayout="horizontal"
dataSource={users}
renderItem={item => (
<List.Item>
...
</List.Item>
)}
/>

react native flatlist with several arrays of data

I'M new to RN and need some help
I have an object like
{title:"title",price:"price",subtitle:"subtitle"}
And I'd like to use 2 values at flatlist, like here -
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={`${item.name.first} ${item.name.last}`}
subtitle={item.email}
/>
)}
/>
</List>
But in this example wasn't show structure of data so I'm confused what should I do. Please help me to solve it!
At the end (render) I need a ListItem this view -
(title) (price)
Or I should better use native-base, but the same questions about 2 value, passing to list item

You have to pass an array into the data property, then you can do:
<FlatList
data={this.state.data}
renderItem={({ item }) => ( //this part will iterate over every item in the array and return a listItem
<ListItem
key={item.id}
title={item.title}
price={item.price}
/>
)}
/>
</List>