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

Question

  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)

make height 30% of the device height by using `Dimensions` API from react native? — nithinpp, Jul 11 '22 at 05:07

miknoup · Accepted Answer · 2022-07-11T07:10:21.310

0

Try using useWindowDimensions hook:

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

edited Jul 11 '22 at 07:10

answered Jul 11 '22 at 07:10

miknoup

204
2
5

score 0 · Answer 2 · answered Jul 11 '22 at 08:25

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

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

2 Answers2