I have a react native app. And I have a searchfield. The search funtion works fine. But the problem I am facing is that the button that is responsible for going to the main screen doesn’t work anymore after a search query.

Code:

Search context:

/* eslint-disable prettier/prettier */

import React, { createContext, useEffect, useState } from "react";

import { fetchAnimalData } from "./animal/animal.service";
import useDebounce from "../hooks/use-debounce";

export const SearchAnimalContext = createContext();
export const SearchAnimalContextProvider = ({ children }) => {
    const [searchAnimal, setSearchAnimal] = useState([]);
    const [results, setResults] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [input, setInput] = useState("");
    const debounce = useDebounce(input, 500);

    useEffect(() => {
        if (input === "") {
            fetchAnimalData("");
        }
        fetchAnimalData();
    }, [input, debounce]);

    const performSearch = async (text) => {
        setLoading(true);
        setError(null);
        setTimeout(() => {
            if (text.length === "") {
                fetchAnimalData("");
            }
            fetchAnimalData(text)
                .then((response2) => {
                    setResults(response2);
                    setLoading(false);
                })
                .catch((err) => {
                    setLoading(false);
                    setError(err);
                });
        }, 100);
    };
    return (
        <SearchAnimalContext.Provider
            value={{
                results,
                setResults,
                searchAnimal,
                setSearchAnimal,
                input,
                setInput,
                performSearch,
                loading,
                error,
            }}>
            {children}
        </SearchAnimalContext.Provider>
    );
};

api call:

/* eslint-disable prettier/prettier */

import { API_URL } from "@env";
import { retrieveToken } from "../../services/authentication/token";

export const fetchAnimalData = async (text) => {
    const token = await retrieveToken();
    try {
        if (token) {
            const response = await fetch(`${API_URL}/api/animals/?search=${text}`, {
                method: "GET",
                headers: {
                    Authorization: `Token ${token}`,
                    Accept: "application/json",
                    "Content-Type": "application/json",
                },
            });
            return await response.json();
        } else {
            throw new Error(token);
        }
    } catch (error) {
        console.error("There was a problem with the fetch operation:", error);
        throw error;
    }
};

and the component with the searchfield:

import { ActivityIndicator, MD2Colors } from "react-native-paper";
import { FlatList, Keyboard, TouchableOpacity } from "react-native";
import React, { useContext } from "react";

import { AccordionItemsContext } from "../../../services/accordion-items.context";
import { AnimalDetailToggle } from "../../../components/general/animal-detail-toggle-view";
import { CategoryContext } from "../../../services/category/category.context";
import { CategoryInfoCard } from "../components/category-info-card.component";
import { CategoryNavigator } from "/src/infrastructure/navigation/category.navigator";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { SearchAnimalContext } from "../../../services/search-animal.context";
import { Searchbar } from "react-native-paper";
import { Spacer } from "../../../components/spacer/spacer.component";
import styled from "styled-components/native";

export const CategoryList = styled(FlatList).attrs({
    contentContainerStyle: {
        padding: 15,
    },
})``;

export const LoadingContainer = styled.View`
    position: absolute;
    top: 50%;
    left: 50%;
`;

export const CategoryScreen = ({ navigation }) => {
    useContext(AccordionItemsContext);
    const { loading, categoryList } = useContext(CategoryContext);
    const { performSearch, results, setInput, input } = useContext(SearchAnimalContext);

    return (
        <SafeArea>
            {loading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.blue500} />
                </LoadingContainer>
            )}
            <Searchbar
                placeholder="search animalll"
                onChangeText={(text) => {
                    if (text.length === 0) {                        
                    }
                    setInput(text.substring(0));
                    performSearch(text);
                }}
                value={input}
            />          
        </SafeArea>
    );
};

And the component with the button that doesn;t work anymore after a search query:

<Tab.Navigator screenOptions={createScreenOptions}>
    <Tab.Screen name="Dieren" component={CategoryNavigator} />
</Tab.Navigator>

So for example I put in the searchfield the characters che and I erase the characters then the Button with name Dieren doesn’t work anymore.

I think it has to do with the function performSearch – maybe the state of the search has to be reset.

But I can’t put a finger on it.

Question: how to get the button Dieren again working after a search in the textfield?