Pass JSON data into another screen

Question

1

I am a beginner and still learning to react native.

In my react native App, I have 2 screens. In the first page, I have JSON data ; I want to pass this JSON data to the next page.

I used react-navigation for navigating between pages. I need to passed each parameter for a new book screen for each book.

But I couldn't figure out, how to pass JSON data to next page! In BookScreen.js the function "getParam" is not been seen.

First Screen: ExploreScreen.js

import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  TouchableOpacity,
} from "react-native";

export default function ExploreScreen({ navigation, route }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    await fetch(
      "http://www.json-generator.com/api/json/get/bTvNJudCPS?indent=2"
    )
      .then((response) => response.json())
      .then((receivedData) => setData(receivedData));
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={styles.book}
            onPress={() => navigation.navigate("Book", item)}
          >
            <Image
              style={styles.bookImage}
              source={{ uri: item.book_image }}
            ></Image>
            <View>
              <Text style={styles.bookTitleText}>{item.title}</Text>
              <Text style={styles.bookAuthor}>{item.author}</Text>
              <Text style={styles.bookGenre}>
                <Text styles={styles.gen}>Genul: </Text>
                {item.genre_id}
              </Text>
            </View>
          </TouchableOpacity>
        )}
      ></FlatList>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    alignSelf: "center",
    paddingVertical: "15%",
  },

  book: {
    flex: 1,
    flexDirection: "row",
    marginBottom: 3,
  },
  bookImage: {
    width: 100,
    height: 100,
    margin: 5,
  },
  bookTitleText: {
    color: "#8B0000",
    fontSize: 15,
    fontStyle: "italic",
    fontWeight: "bold",
  },
  bookAuthor: {
    color: "#F41313",
  },
});

Second Screen: BookScreen.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";
export default function BookScreen({ navigation, route }) {
  const { item } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{navigation.getParam("name")}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    alignSelf: "center",
    paddingVertical: "100%",
  },
  text: {
    fontSize: 20,
  },
});

Answer 1

In your BookScreen, change it to the following:

export default function BookScreen({ navigation, route }) {
  const { item } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{item.name}</Text>
    </View>
  );
}

Edit: I think you should pass the data like this:

navigation.navigate('Book', {item: item});