ReanimatedError: Maximum call stack size exceeded (native stack depth), js engine: reanimated

[AlirezaHadjar]

Hi 👋 When I wanted to use your library, I found a bug when I used refreshing and onRefreshStart. Then I removed all my code and just used the code you have put in the README which is this:

import React, { useCallback, useState } from "react";
import { StatusBar, Text, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import { Route, TabView, TabFlatList } from "@showtime-xyz/tab-view";

const StatusBarHeight = StatusBar.currentHeight ?? 0;
const TabScene = ({ route }: any) => {
    return (
        <TabFlatList
            index={route.index}
            data={new Array(20).fill(0)}
            renderItem={({ index }) => {
                return (
                    <View
                        style={{
                            height: 60,
                            backgroundColor: "#fff",
                            marginBottom: 8,
                            justifyContent: "center",
                            alignItems: "center",
                        }}>
                        <Text>{`${route.title}-Item-${index}`}</Text>
                    </View>
                );
            }}
        />
    );
};

export default function Example() {
    const [isRefreshing, setIsRefreshing] = useState(false);
    const [routes] = useState<Route[]>([
        { key: "like", title: "Like", index: 0 },
        { key: "owner", title: "Owner", index: 1 },
        { key: "created", title: "Created", index: 2 },
    ]);
    const [index, setIndex] = useState(0);
    const animationHeaderPosition = useSharedValue(0);
    const animationHeaderHeight = useSharedValue(0);

    const renderScene = useCallback(({ route }: any) => {
        switch (route.key) {
            case "like":
                return <TabScene route={route} index={0} />;
            case "owner":
                return <TabScene route={route} index={1} />;
            case "created":
                return <TabScene route={route} index={2} />;
            default:
                return null;
        }
    }, []);

    const onStartRefresh = async () => {
        setIsRefreshing(true);
        setTimeout(() => {
            console.log("onStartRefresh");
            setIsRefreshing(false);
        }, 5000);
    };
    const renderHeader = () => <View style={{ height: 300, backgroundColor: "#000" }} />;
    return (
        <TabView
            onStartRefresh={onStartRefresh}
            isRefreshing={isRefreshing}
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            lazy
            renderScrollHeader={renderHeader}
            minHeaderHeight={44 + StatusBarHeight}
            animationHeaderPosition={animationHeaderPosition}
            animationHeaderHeight={animationHeaderHeight}
        />
    );
}

I've just replaced TabFlashList with TabFlatList and setTimout ms from 300 to 5000 to make it more realistic. The crash I mentioned happens in this snippet as well. When you pull to refresh and then start scrolling the error screen appears.

https://github.com/showtime-xyz/showtime-tab-view/assets/57192409/5507a04f-45bf-4851-8a39-03c551047fa3

[BalogunofAfrica]

What version of reanimated are you using?

[alantoa]

hey @AlirezaHadjar, this issue is from reanimated, I assume you are using react-native-reanimated v3.1.0, please upgrade it to >= v3.2.0 or use this patch which will fix it!

[alantoa]

re: https://github.com/showtime-xyz/showtime-tab-view/issues/5#issuecomment-1544616896

[AlirezaHadjar]

Thanks, @alantoa. I can't upgrade to v3.2.0 due to this issue. But The patch works like a charm 🙌

[AlirezaHadjar]

By the way, I'm using reanimated v3.1.0