React Native fixed footer doesn't stay on scroll

user_11979842 0
Viewed 1332

With this code:

<View style={{flex: 1, marginTop: 20}}>
    <ScrollView style={{backgroundColor: 'blue'}}>
        <Text>Filler Text</Text>
    </ScrollView>
    <View style={{backgroundColor: "red"}}>
        <Text>Footer</Text>
    </View>
</View>

it makes something like this:

enter image description here

which is exactly how I want it. However, if I add more filler text so that it takes up the whole screen, the footer goes down requiring me to scroll to get to it.

If anyone knows how to fix this, it would be really helpful. Thanks!

EDIT: this is react native, not plain HTML. position: fixed isnt supported unfortunately.

expo react-native reactjs
2 Answers
.content {
    height: 10000px
}

.footer {
    background: red;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}    

<div class="content"></div>
<div class="footer"></div>
user_94078090 
<View style={{backgroundColor: "red", position: 'absolute', bottom:0}}>
        <Text>Footer</Text>
    </View>
user_141394410
Related