How can I position a React Native element at the bottom of the screen?

I’m building a small eCommerce app in React Native and when the customer adds something to their cart I want to display a “View cart” TouchableOpacity at the bottom of the screen until they clear the cart.

This is what I’m returning on each page, along with styling:

return (
  <TouchableOpacity
    style={styles.cartView}
    onPress={() => navigation.navigate('View Cart')}>
    <Text style={styles.cartText}>View cart</Text>
  </TouchableOpacity>
);

cartView: {
justifyContent: 'center',
alignItems: 'center',
maxHeight: 50,
minWidth: '100%',
alignSelf: 'center',
marginTop: 50,
backgroundColor: '#373F51',
padding: 10,
top: 40,
borderRadius: 20,
},

When I’m on a page that isn’t scrollable this works fine and it appears right above the tab navigator. However, when I try and render this on a scrollable page, like one with a FlatList, things get messy. It either lays directly on top of the component below it or you’ll have to scroll to the bottom of the screen to see it if it’s placed at the bottom of the component tree.

How can I change my styling so that it renders at the bottom of the page and stays there in one spot (I’m fine with it covering the content behind it)?