Excessive number of pending callbacks: 501.

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 && <View style={styles.loading}> <ActivityIndicator size={50} color="dimgray" animating={isLoading} /> </View> } <View style={styles.sync}> <Icon name=‘sync-circle’ size={70} color=‘#2196F3’ onPress={() => { setIsLoading(true); GetDeviceLogs(employee_id) }} /> </View> */}

        <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® Core™ 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

[mjmasn]

Yeah this seems to be caused by a change to TouchableOpacity in React Native 0.69…

https://github.com/facebook/react-native/commit/3eddc9abb70eb54209c68aab7dbd69e363cc7b29

(flattenStyle(prevProps.style)?.opacity !==
        flattenStyle(this.props.style)?.opacity) !==
        undefined

is always going to evaluate to true, therefore calling this._opacityInactive(250); as many times as the component is (re)rendered.

Quick fix: remove the !== undefined from node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js then run npx patch-package react-native

[mjmasn]

@FrikkieSnyman yep 👍 I imagine it’ll be released with React Native 0.72 unless it gets cherry picked onto 0.71 in the meantime