React Native Scrollview height not changing to fit children elements

Question

I have gone through a lot of posts here on StackOverflow and elsewhere on the web, but could not find a similar issue.

I am working on a React Native app that has a ScrollView, but the problem is that its height is not increasing to fit the children elements and the screen cannot be scrolled to see all the content.

The layout of the screen similar to this one: https://codesandbox.io/s/youthful-bogdan-moges?file=/src/App.js or https://snack.expo.dev/ZnhfpNHoc (please select iOS instead of Web) - I have given background colour to the outer and inner ScrollView elements to highlight the issue. While in CodeSandbox you can scroll to the bottom, on mobile you cannot actually scroll below the bottom border of the blue element.

I have tried a lot of things like setting flex: 1 to SafeAreaView, main View and both style and contentContainerStyle for ScrollView. It is possible to increase the height of scrollable area by setting minHeight (commented-out in CodeSandbox), but I need it to be dynamic as the amount of data can be anything.

Big thanks if anyone knows a solution to this one.

Answer 1

you can use this property flexGrow: 1, instead of flex:1

 contentContainer: {
    //flex:1,
     flexGrow: 1,
    // minHeight: '300%',
    backgroundColor: "cyan"
  },