Skip to content

Commit 2f82c43

Browse files
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

File tree

  • src/components/ScrollViewWithBottomPadding

src/components/ScrollViewWithBottomPadding/styles.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { StyleSheet } from "react-native";
22

33
const styles = StyleSheet.create({
44
container: {
5-
flex: 1,
5+
flexGrow: 1,
6+
flexShrink: 1,
67
},
78
});
89

0 commit comments

Comments
 (0)