KeyboardAwareScrollView compatibility issue with react-navigation@7+ presentation 'formSheet'

[kimak]

Describe the bug
react-navigation@7 has introduced formSheet support recently
react-navigation/react-navigation#12032

By using it it breaks KeyboardAwareScrollView behavior.

Code snippet
❌ KeyboardAwareScrollView flickering with a TextInput inside the view

      <Stack.Group
        screenOptions={{
          presentation: 'formSheet'
       }}>

✅ KeyboardAwareScrollView working fine with a TextInput inside the view

      <Stack.Group
        screenOptions={{
          presentation: 'modal'
       }}>

Repo for reproducing
The pbm is easy to reproduce with the latest version of react-navigation but let me know and I can create one if needed.

To Reproduce
Steps to reproduce the behavior:

1. Open the screen
2. Click on the TextInput in the middle of the view
3. The scroll is flickering and the screen is not usable.

Expected behavior
Same behavior as with presentation: 'modal'.

• Device: iPhone8
• OS: iOS 17.4
• RN version: 0.76.3
• RN architecture: new
• JS engine: Hermes
• Library version: 1.14.5

[kirillzyusko]

@kimak well, if you can prepare a reproduction that would be really great 👍

I'm just afraid that fixing this problem may involve react-native-screens team, so if you prepare a simple reproduction example that would help both teams 😊

[kimak]

@kirillzyusko I found some time to make a reproductible demo

https://github.com/kimak/keyboardAwareScrollFormSheet/

keyboard_reproductible.mov

Let me know if the bug happen to this lib or if it's only related to react-native-screens formSheet.

Thanks for your help

[kirillzyusko]

Thank you @kimak for a reproduction example ❤️ Appreciate it!

From what I see:

• all native events from keyboard-controller arrives as expected (which is good);
• the ScrollView in "FormSheet" screen is not scrollable 😲 (and I think problem comes from this fact).

From what I see you applied a hack to make view elements be in the center by adding fake view with height = screenHeight / 2. It works, but I think the problem that you were trying to solve with this view still remains and it blocks the KeyboardAwareScrollView. Let me explain that a little bit more.

In you KeyboardDemo the available space is equal to screenHeight / 2 (fake view) + ~50 (TextInput). In this case the content of ScrollView is too small to be scrollable. Now we add 291 (keyboard height) and the view is still not scrolalble. Because of that this overlap happens (technically keyboard-controller tries to scroll the content, but since the view is not scrollable you see the overlap).

If you modify you component as (i. e. in your case apply double padding - from top and bottom):

<KeyboardAwareScrollView bottomOffset={50} style={{flex: 1}}>
  {children}
  <TextInput placeholder={placeholder} />
  {children}
</KeyboardAwareScrollView>

Then it will start to work.

I think the problem should be fixed in react-native-screens, because their presentation breaks ScrollView styling.

Alternatively you can try to specify minHeight for ScrollView styles:

  container: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
+  minHeight: Dimensions.get("screen").height,
  },

Let me know if I answered your question or if you have any additional questions 😊 🙌

[radko93]

formSheet has issues with ScrollView in general software-mansion/react-native-screens#2424

[kimak]

Thanks, @kirillzyusko! Your explanations are very clear 🙏.

I will close this ticket as the issue is definitely related to react-native-screens. Also, thanks to @radko93 for pointing out the original ScrollView issue.

The minHeight hack can be a helpful workaround while we wait for a better fix:

minHeight: Dimensions.get("screen").height

Side note: The Dimensions height value works only if the Stack.Screen doesn't have a header:

<Stack.Screen
  name="formsheet"
  options={{
    presentation: "formSheet",
    headerShown: false,
  }}
/>

Otherwise, we need to account for the header height when setting the minHeight.