我已经创建了一个简单的React Native应用程序与消防基地和数据rethrow是不工作.当运行应用程序的数据是可见的控制台上，但数据不能在移动的屏幕上查看.请帮助我解决这个问题，
这是我的App.js文件

import React from "react";
import { SafeAreaView, TextInput } from "react-native";
import { StyleSheet, Text, View, Pressable, FlatList } from "react-native";
import { useEffect, useState } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import ShoppingItems from "./components/ShoppingItems";
import {app,db,getFirestore,collection,addDoc,getDocs,} from "./firebase/index";
import { ActivityIndicator } from "react-native";

export default function App() {
  
  const [title, setTitle] = useState("");
  const [shoppingList, setShoppingList] = useState([]);

  const addShopingItem = async () => {
    try {
      const docRef = await addDoc(collection(db, "shopping"), {
        title: title,
        isCheked: false,
      });
      console.log("Document written with ID: ", docRef.id);
      setTitle("");
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  };

  const getShoppingItems = async () => {
    const querySnapshot = await getDocs(collection(db, "shopping"));
    querySnapshot.forEach((doc) => {
      console.log(doc.id, doc.data());
      setShoppingList({
        ...doc.data(),
        id: doc.id,
      });
    });
  };

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

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        {/* header */}
        <Text style={styles.heading}>Sghopping Items</Text>
        {/* noofshoppng items */}
        <Text style={styles.noOfItems}>2</Text>
        {/* delete button */}
        <Pressable>
          <MaterialIcons
            style={styles.deleteIcon}
            name="delete"
            size={30}
            color="black"
          />
        </Pressable>
      </View>
      {/* flat List */}
      {shoppingList.length > 0 ? (
        <FlatList
          data={shoppingList}
          renderItem={({ item }) => <ShoppingItems title={item.title} />}
          keyExtrator={(item) => item.id}
        />
      ) : (
        <ActivityIndicator />
      )}

      {/* Text inpus */}
      <TextInput
        style={styles.input}
        placeholder="Enter Shoping Itms"
        value={title}
        onChangeText={(text) => setTitle(text)}
        onSubmitEditing={addShopingItem}
      />
    </SafeAreaView>
  );
}

这是我的ShppingItems.js文件

import { View, Text, StyleSheet } from "react-native";
    import React from "react";
    import { AntDesign, MaterialIcons } from "@expo/vector-icons";
    import { Pressable } from "react-native";
    
    const ShoppingItems = (props) => {
      return (
        <View style={styles.container}>
          <Pressable>
            <AntDesign name="checkcircleo" size={24} color="black" />
          </Pressable>
          <Text style={styles.title}>{props.title}</Text>
        </View>
      );
    };

export default ShoppingItems;

这是控制台enter image description here