Skip to content

fix: KeyboardAwareScrollView collapses to zero height inside auto-sizing parents#1383

Closed
vilson-junior-squadra wants to merge 1 commit intokirillzyusko:mainfrom
vilson-junior-squadra:fix-modal-auto-sizing
Closed

fix: KeyboardAwareScrollView collapses to zero height inside auto-sizing parents#1383
vilson-junior-squadra wants to merge 1 commit intokirillzyusko:mainfrom
vilson-junior-squadra:fix-modal-auto-sizing

Conversation

@vilson-junior-squadra
Copy link
Copy Markdown
Contributor

@vilson-junior-squadra vilson-junior-squadra commented Mar 20, 2026

Description
When using KeyboardAwareScrollView inside a wrapper that sizes itself to its content (e.g., a Modal or Bottom Sheet without an explicit height constraint), the scroll view completely collapses to height 0.

This occurs because ReanimatedClippingScrollView within ScrollViewWithBottomPadding applies a hardcoded flex: 1 style. In React Native's Yoga layout engine, a flex: 1 (which acts as flexBasis: 0) child placed inside an unconstrained, self-sizing parent computes its available space as 0.

By substituting flex: 1 with flexGrow: 1 and flexShrink: 1, the layout maintains full backward compatibility for standard full-screen usages (it still stretches to fill an available Flex container) but gracefully falls back to its intrinsic content height when placed inside an auto-sizing wrapper.

Steps to Reproduce
Render KeyboardAwareScrollView inside a View that lacks absolute constraints or explicit flex stretching:

import React from 'react';
import { View, Text, TextInput } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';

// E.g., An auto-height modal overlay container
export const SqueezedModalExample = () => (
  <View style={{ backgroundColor: 'white', borderRadius: 16 }}>
    {/* This will collapse to height 0 and completely disappear from the screen limits */}
    <KeyboardAwareScrollView>
      <Text>Title</Text>
      <TextInput placeholder="Type here..." />
    </KeyboardAwareScrollView>
  </View>
);

Version 1.21.1

Expected behavior
KeyboardAwareScrollView should accurately compute its size based on its children's intrinsic content height when the parent View is dynamically sizing itself.

Actual behavior
The component shrinks to a bounding box of height 0 because of the forced flex: 1 container style, making forms invisible inside auto-sized elements like custom Modals.

Solution
Replaced flex: 1 with { flexGrow: 1, flexShrink: 1 } inside src/components/ScrollViewWithBottomPadding/styles.ts. This effectively gives the container a flexBasis: 'auto', which solves the collapsing sequence.

Simulation

Before

image

After

image

@kirillzyusko kirillzyusko self-assigned this Mar 20, 2026
@kirillzyusko kirillzyusko added the KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component label Mar 20, 2026
@kirillzyusko kirillzyusko self-requested a review March 20, 2026 13:15
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 20, 2026

📊 Package size report

Current size Target Size Difference
306960 bytes 306911 bytes 49 bytes 📈

@kirillzyusko
Copy link
Copy Markdown
Owner

Thank you @vilson-junior-squadra

Changes look good for me. Let's see what CI tells. If everything is alright then I'll merge this PR (don't pay attention to iOS 26 and iOS 15 simulator tests, they are quite unstable in 1.21.x release and I'm working on making them more stable)

@kirillzyusko
Copy link
Copy Markdown
Owner

Hey @vilson-junior-squadra

Could you please fix prettier error? 🙏

@vilson-junior-squadra vilson-junior-squadra deleted the fix-modal-auto-sizing branch March 20, 2026 18:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants