Excessive number of pending callbacks: 501. #34376
Description
Description
Hi There,
I am using TouchableOpacity inside the FlatLis. And the FlatList data has 500 objects. when the data appearing on the screen, it is showing a warning as below
function for gating data
const CallLogsAPI = async (employee_id) => {
try {
// setIsLoading(true)
let res = await axios.post(${BASE_URL}/Temp/getCallLogs, { employee_id }, { timeout: 3000 })
let data = res.data.data
// console.log('apiLogData', data)
SetApiLogData(data)
setIsLoading(false)
}
catch (e) { console.log("bb", e) }
setIsLoading(false)
}
return data to screen:
return (
<View style={{ height: '100%' }}>
{/* {
isLoading &&
}
<Icon name='sync-circle' size={70} color='#2196F3' onPress={() => { setIsLoading(true); GetDeviceLogs(employee_id) }} />
*/}
<FlatList
data={apiLogData}
initialNumToRender='15'
refreshControl={
<RefreshControl
refreshing={isLoading}
onRefresh={()=>{setIsLoading(true); GetDeviceLogs(employee_id)}}
colors={['red','blue',"yellow"]}
/>}
renderItem={({ item }) => {
return (
<View style={[styles.card, styles.elevation]}>
<View style={{ flex: 2, flexDirection: "row", justifyContent: "space-between" }}>
<View >
<TouchableOpacity onPress={() => navigation.navigate("rename", { 'contactId': item.contactId })}>
<Text style={styles.heading}>{item.name ? item.name : 'Unknown'}</Text>
</TouchableOpacity>
</View >
<View style={{ flexDirection: "row", justifyContent: "center", paddingRight:5 }}>
<TouchableOpacity onPress={() => ExtLinks(`tel:${item.phoneNumber}`)}>
<Text style={{ marginHorizontal: 8 }}><SvgIcons.Call /></Text>
</TouchableOpacity>
{/* <TouchableOpacity onPress={() => ExtLinks(`sms:${item.phoneNumber}`)}>
<Text style={{ margin: 5 }}><SvgIcons.Message /></Text>
</TouchableOpacity> */}
<TouchableOpacity onPress={() => ExtLinks(`whatsapp://send?phone=${item.phoneNumber}`)}>
<Text style={{ marginHorizontal: 8 }}><SvgIcons.Whatsapp /></Text>
</TouchableOpacity>
</View>
</View>
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text style={{color:"black"}}>
{item.phoneNumber} {item.type == 'UNKNOWN' ? '' : `(${item.duration}sec)`} <Icon
name={item.type == 'INCOMING' ? 'phone-incoming' : item.type == 'OUTGOING' ? 'phone-outgoing' : 'phone-missed'}
color={item.type == 'INCOMING' ? 'green' : item.type == 'OUTGOING' ? 'deepskyblue' : 'red'} />
</Text>
<Text style={{color:"black"}}> {item.dateTime} </Text>
</View>
</View>
)
}
}
/>
</View>
)
}
could you please suggest me a way how can i avoid this warning.
Thanks
Version
0.69.3
Output of npx react-native info
System:
OS: Windows 10 10.0.19044
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 510.30 MB / 7.89 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 31, 32, 33
Build Tools: 30.0.3, 31.0.0, 33.0.0
System Images: android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-212.5712.43.2112.8609683
Visual Studio: 17.2.32630.192 (Visual Studio Community 2022)
Languages:
Java: 17.0.4
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.3 => 0.69.3
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
1
Snack, code example, screenshot, or link to a repository
