Can't send and receive data from firebase in React Expo

Question

0

I am trying to build a modal with a user profile update button using React Expo + firebase. Now I am finding it difficult sending and recording data to firebase database here is what I tried. The google authentication information gets recorded but not the data from when I ask the user. How can I fix this problem?

import { View, Text, Image, addDoc, collection, TextInput, TouchableOpacity} from 'react-native';
import tw from 'twrnc';
import useAuth from '../hooks/useAuth';
import React, {useLayoutEffect, useState} from "react";
import {useNavigation} from "@react-navigation/core";
import { doc, serverTimestamp, setDoc, initializeApp } from "firebase/firestore";
import {db} from '../firebase';



function ModalScreen() {
  const { user } = useAuth();
  const navigation = useNavigation();
  const [image, setImage] = useState("");
  const [occupation, setOccupation] = useState("");
  const [age, setAge] = useState("");

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: "Update your profile",
      headerStyle: {
        backgroundColor: "FF5864",
      },
      headerTitleStyle: { color: "red" },
    });
  }, []);

  const updateUserProfile = async () => {
   await setDoc(doc(db, "users", user.uid), {
      id: user.uid,
      displayName: user.displayName,
      photoURL: image,
      email: user.email,
      photoURL: user.photoURL,
      occupation: occupation,
      age: age,
    
      timestamp: serverTimestamp(),
    })
      .then(() => {
        navigation.navigate("Home");
      })
      .catch((error) => {
        alert(error.message);
      });
      setImage("");
      setOccupation("");
      setAge("");
  };

  return (
    <View style={tw`flex-1 items-center pt-1 bg-white`}>
      <Image
        style={tw`h-20 w-full`}
        resizeMode="contain"
        source={{ uri: "https://i.postimg.cc/QNTs2Kss/357-FE315-9-E44-4-B23-8464-EA0-E6-A953-E6-F.jpg" }} />

      <Text style={tw`text-xl text-gray-500 p-2 font-bold`}>
        Welcome {user.displayName}
      </Text>

      <Text style={tw`text-center p-4 font-bold text-red-400`}>
        Step:1 The Profile Pic</Text>
      <TextInput 
        Value={image} 
        OnChangeText={(text) => setImage (text)}
        placeholder="Enter a Profile Pic URL" 
        style={tw`text-center text-xl pb-2`}/>

      <Text style={tw`text-center p-4 font-bold text-red-400`}>
        Step:2 The Job
      </Text>
      <TextInput
        Value={occupation}
        OnChangeText={(text) => setOccupation (text)}
        style={tw`text-center text-xl pb-2`}
        placeholder="Enter your occupation" />

      <Text style={tw`text-center p-4 font-bold text-red-400`}>
        Step:3 The Age
      </Text>
      <TextInput
        Value={age}
        OnChangeText={(text) => setAge (text)}
        style={tw`text-center text-xl pb-2`}
        placeholder="Enter your age"
        keyboardType="numeric"
        maxLength={2} />

      <TouchableOpacity
        onPress={updateUserProfile}
        style={tw`w-64 p-3 rounded-xl absolute bottom-10 bg-red-400`}
      >
        <Text style={tw`text-center text-white text-xl font-bold`}>Update Profile</Text>
      </TouchableOpacity>
    </View>
  );
}

export default ModalScreen;