I am using StackNavigator for my chat app, and when i use dynamic header title, it throws error of excessive number of pending callbacks: 501. SOme pending callbacks that might have leaked by never being called from native code: {'1434: {'module': ReanimatedModule;', 'method': 'getValue'}; after some debugging i have found that the headerTitle is throwing error. My codes are as below for App.js:
function ChatStack() {
return (
<Stack.Navigator>
<Stack.Screen name="ChatStack" component={ChatScreen}
options={({navigation, route}) => (
{ headerTitle: () => {
return (
<View>
<Text style={{fontSize: 18}}>{route.params.username}</Text>
{!!route.params.onlineStatus && (
<Text style={{fontSize: 15}}> {route.params.onlineStatus}
</Text>)}
</View>
);
},
headerLeft: () => (
<TouchableOpacity style={{alignItems: 'center', flexDirection: 'row'}}
onPress={() => { navigation.goBack(); }}>
<Icon name="ios-arrow-back" size={18} color="#242424" />
</TouchableOpacity>
),
})
} />
</Stack.Navigator>
);
}
codes that are setting the params:
useEffect(() => {
const unsubscribe = database() .ref(users/${userId})
.on('value', (snapshot) => {
if (snapshot && snapshot.exists()) {
const val = snapshot.val();
if (typeof val.online === 'string') {
props.navigation.setParams({ onlineStatus: val.online, });
} else {
const lastSeen = new Date(val.online);
props.navigation.setParams({ onlineStatus: moment(lastSeen).calendar(),
});
}
}
});
return () => unsubscribe(); }, [props.navigation, props.route, userId]);
After a lot of debugging and research i came out with the point that the realtime database listener which is setting the onlineStatus param is causing the error of excessive callbacks. Anyone have solution for this or workaround to fix this error?
