React-Native: RefreshControl on ScrollView with nested View won't show animation

Question

So I am pretty new to React Native and I'm trying to implement a list of contacts which is refreshable. However I cannot get it to work (probably because I missed something). I don't get any errors, I simply cannot pull down to get the animation.

I have created a wrapper component which is used as a basis for all my other stuff besides the contact-list as well.

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;

As seen above, refreshing & onRefresh get passed to the Wrapper, because the ScrollView is located there.

Now in my contact list, I put all my contacts inside that wrapper element and pass refreshing & onRefresh to the Wrapper. I also have a header and a FloatingActionButton on that screen. The screen takes up 100% of the height because I want that FloatingActionButton on the bottom right of my screen.

// 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>

RodSarhan · Accepted Answer · 2022-05-09 14:36:19Z

1

I believe that refresh control should be specified as a prop and not as a child of scroll view, example:

<ScrollView
    refreshControl={
        <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh} 
        />
    }
 />

answered May 9, 2022 at 14:36

RodSarhan

1,4871 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonas Over a year ago

That was the problem! Thank you very much for your quick answer!

Collectives™ on Stack Overflow

React-Native: RefreshControl on ScrollView with nested View won't show animation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related