fetching and passing params in react navigation

Question

On Press of a button I need to pass params to another screen where value of that button is fetched, code below;

screen:1

    <TouchableOpacity
            onPress={() => navigation.navigate("Quiz", { fetch: "history" })}
            style={styles.button}
          >
            <Text style={styles.buttonText}>History</Text>
   
</TouchableOpacity>

screen:2

const Quiz = ({ navigation, route }) => {
const { fetch } = route.params;

const getQuiz = async () => {
    setIsLoading(true);
    const url = `https://herokuapp.com/q/${fetch}`;
    const res = await fetch(url);
    const data = await res.json();
    setQuestions(data.results);
    setOptions(generateOptionsAndShuffle(data.results[0]));
    setIsLoading(false);
  };

But during the fetching I get the following error

[Unhandled promise rejection: TypeError: fetch is not a function. (In 'fetch(url)', 'fetch' is "history")]

I have tried using timeout but that is not working, is there a better option.

Answer 1

The issue is that fetch is a native function in javascript (see here).

You should rename the param to another name like quizz.

screen:1

<TouchableOpacity
        onPress={() => navigation.navigate("Quiz", { quizz: "history" })}
        style={styles.button}
      >
        <Text style={styles.buttonText}>History</Text>
</TouchableOpacity>

screen:2

const Quiz = ({ navigation, route }) => {
  const { quizz } = route.params;

  const getQuiz = async () => {
    setIsLoading(true);
    const url = `https://herokuapp.com/q/${quizz}`;
    const res = await fetch(url);
    const data = await res.json();
    setQuestions(data.results);
    setOptions(generateOptionsAndShuffle(data.results[0]));
    setIsLoading(false);
  };