BottomAlignedScrollView.tsx

BottomAlignedScrollView.tsx

import React, {useState} from 'react';
import {LayoutChangeEvent, ScrollView, StyleSheet} from 'react-native';

type BottomAlignedScrollViewProps = {
    readonly children: React.ReactNode;
}

const BottomAlignedScrollView = ({children}: BottomAlignedScrollViewProps) => {
    const [viewHeight, setViewHeight] = useState(0);
    const [contentHeight, setContentHeight] = useState(0);

    const onLayout = (event: LayoutChangeEvent) => {
        const {height} = event.nativeEvent.layout;
        setViewHeight(height);
    }

    const onContentLayout = (_: number, height: number) => {
        setContentHeight(height);
    }

    return (
        <ScrollView
            onLayout={onLayout}
            onContentSizeChange={onContentLayout}
            contentContainerStyle={{
                ...styles.scrollView,
                paddingTop: contentHeight < viewHeight ? viewHeight - contentHeight : 0,
            }}
        >
            {children}
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    scrollView: {
        flexGrow: 1,
        justifyContent: 'flex-end',
    },
});

export default BottomAlignedScrollView;