i want react native FlatList fully performance like RecyclerListView............more then 200 item after FlatList performance so slow/poor and app is not work properly

[rajan-keypress]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

Run react-native info in your terminal and copy the results here.

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

Expected Results

Describe what you expected to happen.

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[rajan-keypress]

please give me better way to do perfomace listview

[rajan-keypress]

react native developer mack a better flatlist or i quit react native

[rajan-keypress]

do not close this issue......or i am gone a Switch to flutter.........

[rajan-keypress]

if this problum not solve...all react native developer check this link out ...
(React native -flutter doc)[https://flutter.dev/docs/get-started/flutter-for/react-native-devs]

[turker0]

This could help

[rajan-keypress]

my list of data i have 10000 item [{}...10000] and i also apply https://stackoverflow.com/questions/44384773/react-native-100-items-flatlist-very-slow-performance/44403088#44403088 but still user experience is still slow..render time tack a to long.................................. i want a better solution

[rajan-keypress]

i have a solution use pureComponent.................................................................................................................................

full code

`
import React, {Component, useState, useEffect} from 'react';
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
ActivityIndicator,
StatusBar,
Dimensions,
} from 'react-native';
import { List, Avatar} from 'react-native-paper';

export default function PerfomaceFlatlist({navigation}) {
const [loading, setLoading] = useState(false);
const [dataSource, setDataSource] = useState([]);
const [offset, setOffset] = useState(1);
const [isListEnd, setIsListEnd] = useState(false);
useEffect(() => getData(), []);
const getData = () => {
if (!loading && !isListEnd) {
setLoading(true);
fetch(
'https://jsonplaceholder.typicode.com/photos?_limit=20&_page=' +
offset,
)
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.length > 0) {
setOffset(offset + 1);
setDataSource([...dataSource, ...responseJson]);
setTimeout(() => {
setLoading(false);
}, 5000);
} else {
setIsListEnd(true);
setLoading(false);
}
})
.catch((error) => {
console.error(error);
});
}
};

const renderItem = ({item}) => (
<>

</>
);

const renderFooter = () => {
return (
<View
style={{
padding: 10,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
{loading ? (
<ActivityIndicator color="black" style={{margin: 15}} />
) : null}

);
};

return (

<FlatList
data={dataSource}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
getItemLayout={(item, index) => ({
length: Dimensions.get('window').height / 10,
offset: (Dimensions.get('window').height / 10) * index,
index,
})}
ListFooterComponent={renderFooter}
onEndReached={getData}
// initialNumToRender={30}
onEndReachedThreshold={0.5}
// maxToRenderPerBatch={20}
// updateCellsBatchingPeriod={10}
// windowSize={200}
/>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});

class MyListItem extends React.PureComponent {
render() {
return (
<List.Item
title={this.props.item.id}
description={this.props.item.title}
left={(props) => (
<Avatar.Image
size={24}
source={{
uri: this.props.item.url,
}}
/>
)}
right={(props) => (
<Avatar.Image
size={24}
source={{
uri: this.props.item.thumbnailUrl,
}}
/>
)}
/>
);
}
}

`

[rajan-keypress]

use Pure Component..must......large list

[rajan-keypress]

PureComponent + 10/20/30 item pagination + getItemLayout ...........use...

[turker0]

Pagination makes sense you can also use onEndReached prop