iOS freezes using ScrollView / KeyboardAvoidingView in Expo 50.0.7 / React Native 0.73.4 and @react-navigation/native 6.1.9

Question

I've been digging around for days trying to figure out why my iOS build is freezing so thought I'd post this for the benefit of anyone else experiencing the issue and to ask if anyone knows of a solution?

I've seen some reports of Excessive number of pending callbacks: 501. around the web but none that I've found talk about KeyboardAvoidingView. I'm finding reliably that if I remove this component, the app is stable and if I reintroduce it it starts freezing again.

As a workaround to not using it I've added a bunch of padding at the bottom of my view so users can still see fields - not perfect but it's a functional workaround for now.

The behaviour seems to be somewhat variable, but if I tap into an input field and/or scroll the screen up and down vigorously, it starts to glitch and pretty soon freezes completely.

The error I see in the console is a stream of:

WARN  Excessive number of pending callbacks: 501. 
Some pending callbacks that might have leaked by never being called from native code: 
{"785":{"module":"UIManager","method":"configureNextLayoutAnimation"},
"788":{"module":"UIManager","method":"configureNextLayoutAnimation"},
"791":{"module":"UIManager","method":"configureNextLayoutAnimation"},
"794":{"module":"UIManager","method":"configureNextLayoutAnimation"},
"797":{"module":"UIManager","method":"configureNextLayoutAnimation"},
"800":{"module":"UIManager","method":"configureNextLayoutAnimation"},
"803":{"module":"UIManager","method":"configureNextLayoutAnimation"},
"806":{"module":"UIManager","method":"configureNext
[snip - and so on]

I'm using a functional component and the nesting is:

  return (
    <ScrollView contentContainerStyle={styles.scrollContainer}>
      <View style={styles.screen}>
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
          ... input fields ...

If I'm using the component wrong, or if someone knows a better way to handle this it would be great to know what I could/should do instead.

Answer 1

Having finally deduced KeyboardAvoidingView is the source of the freeze, I googled it along with Excessive number of pending callbacks: 501. and found this issue:

https://github.com/facebook/react-native/issues/42939

It seems there's a rational explanation that means changing the nesting solves the issue. For the benefit of Googlers, I've just confirmed the following works:

  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        <View style={styles.screen}>
          ... input fields ...