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

[kevgrig]

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 [email protected] 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]

Further investigation by an Expo contributor shows that this seems to be related to KeyboardAvoidingView being a parent of NavigationContainer. Moving KeyboardAvoidingView into the screen seems to resolve the issue.

[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.

[jparkrr]

Just wanted to say that we're running into this too. Also since the update from the versions in expo sdk 39 to 40. We're also using react-navigation (but 4.x).

[jparkrr]

Oh, I just saw that this was likely fixed in 2.16 (https://github.com/software-mansion/react-native-screens/issues/737), and expo sdk 40 is on 2.15. So it seems like it's on expo to upgrade.

(@kevgrig if you use the managed workflow in expo, the package.json upgrade does nothing, since this package uses native code)

[kevgrig]

@jparkrr Oh, I didn't know that, makes sense. @brentvatne FYI

[brentvatne]

@kevgrig - thanks for the ping!

[WoLewicki]

Can I close this issue then? Seems that it is resolved (#737), but not available in Expo managed workflow in SDK 40, but we can't do anything about it unfortunately. Can you confirm it @kevgrig?

[kevgrig]

@WoLewicki I'm using the Expo managed flow so I can't test the (hopeful) solution, so I'd like to wait until the Expo SDK upgrades react-native-screens, but if you'd like to close it, that's okay with me, and I can re-open it if the problem still exists after the next Expo SDK upgrade.

[WoLewicki]

I don't have a strong opinion on it. We can leave it open so people with the same problem can find it easily.

[somebody32]

@WoLewicki I have the same problem with the latest version and I'm not using expo: with enableScreens keyboardAvoidingView is flickering on every keyboard tap

[WoLewicki]

@somebody32 could you please provide a repo with the minimal reproduction needed to spot the issue?

[somebody32]

@WoLewicki, sorry, my bad, somehow missed that I was not on the last patch version, found that when trying to do a repro in a new repo, updating to the latest version fixed it!

[kevgrig]

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