(React Native) How can I make child of Scrollview responsive?-CodePudding

  const dummy = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 <View style={{flex:1}}>
      <ScrollView
        contentContainerStyle={{backgroundColor: 'blue'}}
        style={{backgroundColor: 'red',height:'100%'}}
      >
        {
          dummy.map((item, key) => {

            return (
              <Pressable key={key} style={{width: '80%', height: '30%', backgroundColor: 'green', borderWidth: 2}}>
                <Text> {item}</Text>
              </Pressable>
            )
          })
        }
      </ScrollView>
</View>

I want to make Pressable components' height responsively depend on the height of screen.. But above code is not working... the scrollview is not scrolled and There still should show more pressable components by map but it only shows until 4

The Image of scrollview (android)

CodePudding user response：

Try using useWindowDimensions hook:

const dimensions = useWindowDimensions();
const itemHeight = dimensions.height * 0.3;

CodePudding user response：

You should set flex:1 to contentContainer instead

  <ScrollView
    contentContainerStyle={{
      backgroundColor: "blue",
      flex: 1,
    }}
    style={{ backgroundColor: "red" }}
  >

For the scrolling issue, you may look into here, this comment looks promising for me.

flex:1 on the outer view and flexGrow:1 on the contentContainerStyle for the scrollview