Sometimes, we want to make component stick to bottom in ScrollView but still allow other content to push it down with React Native.

In this article, we’ll look at how to make component stick to bottom in ScrollView but still allow other content to push it down with React Native.

How to make component stick to bottom in ScrollView but still allow other content to push it down with React Native?

To make component stick to bottom in ScrollView but still allow other content to push it down with React Native.

For instance, we write:

import * as React from 'react';
import { ScrollView, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <ScrollView
      contentContainerStyle={{
        flexGrow: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
      <View style={{ width: 50, height: 1000, backgroundColor: 'orange' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'black' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
    </ScrollView>
  );
}

to add 3 Views that has different heights.

They’ll be display on top of each other since we set flexDirection to 'column'.

Conclusion

To make component stick to bottom in ScrollView but still allow other content to push it down with React Native.