ScrollView не работает. React Native

Всем привет! Не получается заставить работать ScrollView на React Native. Есть контент, который находится под нижней границей экрана, соответственно возникла необходимость добавления прокрутки. Вот код:

import * as React from 'react';
import { Platform, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, SafeAreaView, ScrollView, Dimensions } from 'react-native';
import { Calendar } from 'react-native-calendars';
import DateTimePicker from '@react-native-community/datetimepicker';

export function NewTask({ navigation }) {
    const [date, setDate] = React.useState(new Date());
    const [name, setName] = React.useState('');
    const [details, setDetails] = React.useState('');
    const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
        setDate(currentDate);
    };
    return (
        <SafeAreaView style={{flex: 1}}>
            <ScrollView contentContainerStyle={styles.container}>
                <TouchableOpacity onPress={() => navigation.navigate('Dashboard')} style={styles.back}>
                    <Image source={require('../assets/icons/Vector.png')} />
                    <Text style={styles.backText}>Back to dashboard</Text>
                </TouchableOpacity>
                <Text style={styles.inputNameLabel}>Name of deal</Text>
                <View style={styles.inputName}>
                    <TextInput
                    style={styles.inputTextName}
                    placeholder="Enter the name" 
                    placeholderTextColor='rgba(255, 255, 255, 0.4)'
                    onChangeText={name => setName(name)}/>
                </View>
                <Text style={styles.inputDescriptionLabel}>Description</Text>
                <View style={styles.inputDescription}>
                    <TextInput
                    style={styles.inputTextDescription}
                    placeholder="Enter the details" 
                    placeholderTextColor='rgba(255, 255, 255, 0.4)'
                    multiline={true}
                    onChangeText={details => setDetails(details)}/>
                </View>
                <Text style={styles.calendarLabel}>Date</Text>
                <Calendar
                    firstDay={1}
                    monthFormat={'MMMM'}
                    onDayPress={(day) => daySelection(day)}
                    theme={{
                        arrowColor: '#FFFFFF',
                        monthTextColor: '#FFFFFF',
                        dayTextColor: '#FFFFFF',
                        textDisabledColor: 'rgba(255, 255, 255, 0.1)',
                        todayTextColor: '#CC00FF',
                        selectedDayBackgroundColor: '#CC00FF',
                        selectedDayTextColor: '#ffffff',
                        'stylesheet.calendar.main': {
                            container: {
                                position: 'absolute',
                                width: '95%',
                                top: '50%',
                                height: 305,
                                backgroundColor: 'rgba(255, 255, 255, 0.06)',
                                borderRadius: 20
                            },
                            monthView: {}
                        },
                        'stylesheet.calendar.header': {
                            header: {
                                flexDirection: 'row',
                                justifyContent: 'space-between',
                                paddingLeft: 10,
                                paddingRight: 10,
                                alignItems: 'center',
                                backgroundColor: 'rgba(255, 255, 255, 0.03)',
                                height: 39.6,
                                borderTopLeftRadius: 20,
                                borderTopRightRadius: 20
                            }
                        }
                    }}
                />
                <Text style={styles.timeLabel}>Time</Text>
                <View style={styles.timeHourField}>

                </View>
                {/* <DateTimePicker
                    testID="dateTimePicker"
                    timeZoneOffsetInMinutes={0}
                    value={date}
                    mode='time'
                    is24Hour={true}
                    display="default"
                    onChange={onChange}
                /> */}
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flexGrow: 1,
        backgroundColor: '#000000'
    },
    back: {
        position: 'absolute',
        left: '5%',
        top: '8%'
    },
    backText: {
        color: '#9B51E0',
        fontSize: 16,
        fontWeight: '600',
        lineHeight: 22,
        fontStyle: 'normal',
        height: 22,
        left: '20%',
        top: '-52%'
    },
    inputNameLabel: {
        position: "absolute",
        top: '15%',
        left: '10%',
        height: 25,
        fontStyle: 'normal',
        fontWeight: '600',
        fontSize: 18,
        lineHeight: 25,
        color: '#FFFFFF'
    },
    inputName: {
        position: "absolute",
        width: '95%',
        height: 50,
        top: '20%',
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        borderRadius: 20
    },
    inputTextName: {
        position: "absolute",
        top: 14,
        left: 32,
        width: '83%',
        height: 22,
        fontStyle: 'normal',
        fontWeight: '600',
        fontSize: 16,
        lineHeight: 22,
        color: 'rgba(255, 255, 255, 0.4)'
    },
    inputDescriptionLabel: {
        position: "absolute",
        top: '30%',
        left: '10%',
        height: 25,
        fontStyle: 'normal',
        fontWeight: '600',
        fontSize: 18,
        lineHeight: 25,
        color: '#FFFFFF'
    },
    inputDescription: {
        position: "absolute",
        width: '95%',
        height: 70,
        top: '35%',
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        borderRadius: 20
    },
    inputTextDescription: {
        position: "absolute",
        top: 14,
        left: 32,
        width: '83%',
        height: 40,
        fontStyle: 'normal',
        fontWeight: '600',
        fontSize: 16,
        lineHeight: 22,
        color: 'rgba(255, 255, 255, 0.4)'
    },
    calendarLabel: {
        position: "absolute",
        top: '45%',
        left: '10%',
        height: 25,
        fontStyle: 'normal',
        fontWeight: '600',
        fontSize: 18,
        lineHeight: 25,
        color: '#FFFFFF'
    },
    timeLabel: {
        position: "absolute",
        top: '90%',
        left: '10%',
        height: 25,
        fontStyle: 'normal',
        fontWeight: '600',
        fontSize: 18,
        lineHeight: 25,
        color: '#FFFFFF'
    },
    timeHourField: {
        position: "absolute",
        width: '16%',
        height: 50,
        top: '105%',
        left: '5%',
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        borderRadius: 20
    }
});