I have a react native web app. And I have two types of screen: main screen(home) and subscreen. And subscreen has a one-to-one relationship. So for example you can have animals(main scree) and then subcreens, like: mammals -> birds -> pigeons.

The problem I am facing is that for example a user is on pigeons. And the user want one screen back(birds) then in the actual situation the user goes back to mammals(main screen).

So this doesn’t solve it:

<Button title="go back" onPress={() => navigation.goBack()}>
                back
</Button>           

Because the user always goes bakc to main.

So the component looks:

export const SubCategoryScreen = ({ route, navigation }) => {
    const [subCatgoryList, setSubCategoryList] = useState([]);
    const [isLoading, setLoading] = useState(true);
    const [searchAnimal, setSearchAnimal] = useState("");
    const { performSearch, results, setInput, input } = useContext(SearchAnimalContext);
    const [searchTimer, setSearchTimer] = useState(null);
    const { toggle, showAccordion } = useContext(ToggleContext);
    const [toggleIcon, setToggleIcon] = useState(true);
    const { accordionCategoryItems } = useContext(AccordionCategoryItemsContext);
    const { accordionItems } = useContext(AccordionItemsContext);

    const handleClickIcon = () => {
        setToggleIcon(!toggleIcon);
    };

    const filteredData = subCatgoryList.filter((item) =>
        item.name.toLowerCase().includes(searchAnimal.toLowerCase())
    );

    const isFocused = useIsFocused();
    useEffect(() => {
        fetchSubCategoryData(route.params.subcategories).then((data) => {
            if (data.animals.length > 0) {
                setSubCategoryList(data.animals);
                setLoading(false);
            } else {
                setSubCategoryList(data.subcategories);
                setLoading(false);
            }

            isFocused;
        });
    }, [route, isFocused]);

    return (
        <SafeArea>
            {isLoading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.green200} />
                </LoadingContainer>
            )}
            <TextInput
                type="search"
                placeholder="search animalll"
                onChangeText={(text) => {
                    if (!text.length) {
                        //setInput("");
                        CategoryNavigator();
                    }
                    setInput(text.substring(0));
                    performSearch(text);
                }}
                value={input}
            />

            {results.length > 0 ? (
                <AnimalDetailToggle />
            ) : (
                <CategoryList
                    data={filteredData}
                    renderItem={({ item }) => {
                        return (
                            <>
                                <TouchableOpacity
                                    onPress={() => navigation.navigate("groepen", { subcategories: item.id })}
                                    disabled={
                                        isLoading ||
                                        (!item.hasOwnProperty("animals") && !item.hasOwnProperty("subcategories"))
                                    }>
                                    <Spacer>
                                        <SubCategoryInfoCard subcategories={item} />
                                    </Spacer>
                                </TouchableOpacity>
                                <View>
                                    {(item.hasOwnProperty("subcategories") || !item.hasOwnProperty("animals")) && (
                                        <ButtonDetail onPress={() => [toggle(item.id), handleClickIcon()]}>
                                            {toggleIcon ? (
                                                <AntDesign name="downcircle" size={17} color="green" />
                                            ) : (
                                                <AntDesign name="upcircle" size={17} color="green" />
                                            )}
                                        </ButtonDetail>
                                    )}
                                </View>

                                {item.hasOwnProperty("subcategories") &&
                                    item.hasOwnProperty("animals") &&
                                    showAccordion.includes(item.id) &&
                                    accordionCategoryItems(item)}

                                {!item.hasOwnProperty("animals") &&
                                    !item.hasOwnProperty("subcategories") &&
                                    showAccordion.includes(item.id) &&
                                    accordionItems(item)}
                                {}
                            </>
                        );
                    }}
                    keyExtractor={(item) => item.id}
                />
            )}
            <Button title="go back" onPress={() => navigation.goBack()}>
                back
            </Button>
            
        </SafeArea>
    );
};

Question: how to go back one screen, without going to main screen?