Search code examples
reactjsreact-nativescrollview

How to dynamically increase the height of only one section in React Native

I'm trying to have a dynamic height for my screen that adjusts according to the length of the content. I have two sections, first of which has a set height, and the second of which is supposed to increase/decrease in its height depending on the content.

How to have set a minimum set height for Section 2 and still be dynamic if necessary?

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <View style={{ flex: 1 }}>
        // section 1
    <View>
    <View style={{ flexGrow: 1 }}>
        // section 2
    </View>
</ScrollView>

I tried the flowGrow approach, but doesn't seem to work

Solution

  • If you want to set the height of a view to 100, just do 

    <View style={{height:100}}>

    If you don`t set anything, View component will grow with its content. So do:

    <View>

    For your whole example:

    <ScrollView>
    <View style={{ height: 100 }}>
        // section 1
    <View>
    <View>
        // section 2
    </View>
</ScrollView>