KeyboardAvoidingView flickering and hangs with Expo SDK 40, React Navigation, and even with latest react-native-screens@^2.16.0

Description

I recently upgraded to Expo SDK 40 and started experiencing extreme glitches with KeyboardAvoidingView. In a couple of cases, the phone became completely unresponsive and had to be hard-restarted. I isolated it to the interaction of React Navigation and react-native-screens. Expo forces react-native-screens@2.15 but explicitly upgrading with yarn add react-native-screens@^2.16.1 doesn’t help.

Commenting out these two lines resolves the issue:

import { enableScreens } from 'react-native-screens';
enableScreens();

Only tested/reproduced on iPhone.

Screenshots

Steps To Reproduce

1. Click TextInput
2. Observe keyboard flickering

Snack or minimal code example

The issue doesn’t reproduce on Snack seemingly because Snack still uses Expo SDK 39. You can reproduce locally with:

1. git clone https://github.com/kevgrig/rnkavflicker
2. expo start

import React from 'react';
import { KeyboardAvoidingView, ScrollView, TextInput } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { enableScreens } from 'react-native-screens';
enableScreens();

const AppStack = createStackNavigator();

function Screen1() {
  const [value, onChangeText] = React.useState('');
  return (
    <ScrollView contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TextInput
        placeholder='Input'
        style={{ borderWidth: 1, width: '75%', padding: 10 }}
        onChangeText={text => onChangeText(text)}
        value={value}
      />
    </ScrollView>
  );
}

const USE_REACT_NAVIGATION = true;

export default class App extends React.Component {
  render() {
    return (
      <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
        {
          USE_REACT_NAVIGATION ?
              <NavigationContainer>
                <AppStack.Navigator>
                  <AppStack.Screen name='App' component={Screen1} />
                </AppStack.Navigator>
              </NavigationContainer>
            :
              <Screen1 />
        }
      </KeyboardAvoidingView>
    );
  }
}

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Screens: 2.16.1
• React Navigation/stack: 5.12.8

[kevgrig]

Note for anyone else hitting this that, in testing my more complicated application, moving KeyboardAvoidingView inside of NavigationContainer did not help and commenting out the two enableScreens lines was still the only workaround.

[kevgrig]

As per Expo issue 11326, the native fix was backported and everything works now. Thanks!