React Native ScrollView dynamic footer-CodePudding

How to make React native scrollview footer. if the content is smaller than the screen, there should be a button at the very bottom of the screen; if it is larger, then the button should go to the very bottom after the content

I did this, but if there is not enough content, then the button goes up

<ScrollView>

    <Text>asdasd</Text>

    <Button text="Next" />

</ScrollView>

if so, then always sit below the scroll under the button goes, but I need the button to go too

<View>
    <ScrollView>

        <Text>asdasd</Text>

    </ScrollView>

    <Button text="Next" />
</View>

CodePudding user response：

Try setting the scrollview to flex available space, and button to position at bottom

<ScrollView style={{flex: 1}}>
    <Text>asdasd</Text>
    <Button text="Next" style={{bottom: 0}}/>
</ScrollView>

CodePudding user response：

here is my solution which i found

<ScrollView>
    <View style={{ minHeight: height - buttonHeight - safeAreaView }}>
        <Text>Content</Text>
    </View>
    <Button text="Next" />
</ScrollView>