Commit 2f82c43
authored
fix: KeyboardAwareScrollView collapses to zero height inside auto-sizing parents (#1384)
**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:
```tsx
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
<img width="307" height="644" alt="image"
src="https://github.com/user-attachments/assets/887d9155-66ae-40a2-8d3a-8c9e7a7ffc08"
/>
After
<img width="384" height="802" alt="image"
src="https://github.com/user-attachments/assets/be14f9d6-a65b-4cf5-af26-2bf92ccf04b2"
/>1 parent 7efe1e7 commit 2f82c43
1 file changed
Lines changed: 2 additions & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
2 | 2 | | |
3 | 3 | | |
4 | 4 | | |
5 | | - | |
| 5 | + | |
| 6 | + | |
6 | 7 | | |
7 | 8 | | |
8 | 9 | | |
| |||
0 commit comments