Screen that is glued to the bottom of the screen if there is enough space, or a regular scroll view if it does not fit

BottomUpScrollable.tsx

import React, {useCallback, useRef, useState} from 'react';
import {
  Pressable,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {Spacings, COLORS} from '../theme/theme';

export const DemoScreen = () => {
  const [isRefreshing, setRefresh] = useState(false);
  const onRefresh = useCallback(() => {
    setRefresh(true);
    setTimeout(() => setRefresh(false), 1000);
  }, [setRefresh]);

  const [priotityHeight, setHeight] = useState(0);
  const toggleHeight = () => setHeight(priotityHeight > 30 ? 30 : 1000);

  const scrollViewRef = useRef<ScrollView>(null);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        ref={scrollViewRef}
        onContentSizeChange={_ => {}}
        contentContainerStyle={[styles.scrollContentContainer]}
        // centerContent={true}
        showsVerticalScrollIndicator={true}
        refreshControl={
          <RefreshControl
            refreshing={isRefreshing}
            onRefresh={onRefresh}
            tintColor={COLORS.APRICOT_MEDIUM} // ios
            progressBackgroundColor={COLORS.APRICOT_MEDIUM} // android
          />
        }>
        <View style={styles.illustration}>
          <Text
            style={{
              height: 100,
              width: 100,
              backgroundColor: 'purple',
              textAlign: 'center',
            }}>
            Illustration
          </Text>
        </View>
        <View style={[styles.priorityContent]}>
          <Text>Other</Text>
          <Text>Content</Text>
          <Pressable onPress={toggleHeight} style={styles.button}>
            <Text>Toggle size</Text>
          </Pressable>
          <Text style={{height: priotityHeight}}>Here</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContentContainer: {
    flexWrap: 'wrap',
    flexGrow: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'blue',
  },
  contentAlignBottom: {
    justifyContent: 'flex-end',
  },
  illustration: {
    height: 100,
    backgroundColor: 'red',
    width: '100%',
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  priorityContent: {
    flexGrow: 0,
    // flexBasis: 0,
  },
  button: {
    borderRadius: 4,
    backgroundColor: 'white',
    padding: 10,
    margin: 10,
  },
});