React-native: how do I have a scrollable section of my app, but lock the outer container to the size of the screen?

I would like an inside container which holds a large amount of scrolling content, I want an outer section to stay at the bottom of the screen. Instead, the entire page scrolls and the inner section does not, meaning that the bar at the bottom is not always visible.

Here is a simpler version of my project which recreates the issue I am having

import { StyleSheet, View, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
        <ScrollView style={styles.topHalf}>
            <View style={styles.innerScrollable}></View>
        </ScrollView>
        <View style={styles.bottomHalf}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
  },
  topHalf: {
    flex: 1,
    overflow: "scroll",
  },
  bottomHalf: {
    height: 100,
    backgroundColor: "#fff",
  },
  innerScrollable: {
    height: 2000,
    backgroundColor: "#000",
  },
});

I have tried different overflow options, one solution I have is setting the height to Dimensions.get('window').height; but this has the drawback of not staying updated when the size changes.

Any help would be great, thanks!

simplified project highlighting issue

solved with useWindowDimensions().height hook which gives the same value as Dimensions.get('window').height but updates automatically

import { StyleSheet, View, ScrollView, useWindowDimensions } from 'react-native';

export default function App() {
  return (
    <View style={[styles.container, {height: useWindowDimensions().height}]}>
        <ScrollView style={styles.topHalf}>
            <View style={styles.innerScrollable}></View>
        </ScrollView>
        <View style={styles.bottomHalf}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
  },
  topHalf: {
    overflow: "scroll",
  },
  bottomHalf: {
    height: 100,
    backgroundColor: "#fff",
  },
  innerScrollable: {
    height: 2000,
    backgroundColor: "#000",
  },
});