React-Native: RefreshControl в ScrollView с вложенным представлением не отображает анимацию

Итак, я новичок в React Native и пытаюсь реализовать обновляемый список контактов. Однако я не могу заставить его работать (вероятно, потому что я что-то пропустил). Я не получаю никаких ошибок, я просто не могу потянуть вниз, чтобы получить анимацию.

Я создал компонент-оболочку, который используется в качестве основы для всех моих других вещей, кроме списка контактов.

const Wrapper = ({ refreshing, onRefresh, children }) => {
    const theme = useColorScheme();

    return refreshing === null || onRefresh == null ? (
        <SafeAreaView style = {{ flex: 1 }}>
            <ScrollView
                style = {theme === "light" ? styles.container_light : styles.container_dark}
                contentContainerStyle = {{ flexGrow: 1 }}
            >
                <View style = {styles.wrapper}>{children}</View>
            </ScrollView>
        </SafeAreaView>
    ) : (
        <SafeAreaView style = {{ flex: 1 }}>
            <ScrollView
                style = {theme === "light" ? styles.container_light : styles.container_dark}
                contentContainerStyle = {{ flexGrow: 1 }}
            >
                <RefreshControl refreshing = {refreshing} onRefresh = {onRefresh} />
                <View style = {styles.wrapper}>{children}</View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default Wrapper;

Как видно выше, refreshing и onRefresh передаются в Wrapper, потому что там находится ScrollView.

Теперь в моем списке контактов я помещаю все свои контакты в этот элемент-оболочку и передаю refreshing и onRefresh в оболочку. У меня также есть заголовок и FloatingActionButton на этом экране. Экран занимает 100% высоты, потому что я хочу, чтобы FloatingActionButton располагался в правом нижнем углу моего экрана.

// outside my contact-list component:
const wait = (timeout) => {
    return new Promise((resolve) => setTimeout(resolve, timeout));
};

// in my contact-list component:
const [refreshing, setRefreshing] = useState(false);

const onRefresh = useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
}, []);


<Wrapper refreshing = {refreshing} onRefresh = {onRefresh}>
    <Text style = {theme === "light" ? globalStyles.heading_light : globalStyles.heading_dark}>
        {t("ContactsIndexHeader")}
    </Text>

    <View style = {{ marginTop: 30 }}>
        {contacts.length > 0 ? letters.map((letter) => {
            return (...); // Check last name of contact & display if equal to letter
        })
        : null}
    </View>

    <FloatingActionButton icon = "plus" onPress = {() => navigation.navigate("ContactsCreate")} />
</Wrapper>