hi i need to do that when user clicks on Забронировать they can see lil info about that post in their profile
import { Text, View, Image, Pressable, ScrollView } from 'react-native';
import { gStyle } from '../styles/style';
import React, {useState, useEffect} from 'react';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';
import {firebase} from '../Firebase/firebase';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/firestore';

export default function SignUpForMK({route}) {
    const [userAuthenticated, setUserAuthenticated] = useState(false);
    useEffect(() => {
        const unsubscribe = firebase.auth().onAuthStateChanged(user => {
        if (user) {
        setUserAuthenticated(true);
        } else {
        setUserAuthenticated(false);
        }
        });
        
        return unsubscribe;
        }, []);
    const {mkData}=route.params;
    const navigation = useNavigation();
    const bookMK=()=>{
        const currentUserID=firebase.auth().currentUser.uid;
        const bookedMKData={
            name:mkData.name,
            time:mkData.time.toDate().toISOString(),
            image:mkData.image,
            price:mkData.price
        };
        firebase
        .database()
        .ref(`users/${currentUserID}/bookedMK`)
        .push(bookedMKData)
        .then(()=>{
            navigation.navigate('Profile');
        })
    }
  return (
    <View>
        <ScrollView>
        <Header/>
        <View style={gStyle.main}>
            <View style={gStyle.SupBox}>
                <Text style={gStyle.header}>{mkData.name}</Text>
                <Text style={gStyle.hr}></Text>
                <Text style={gStyle.SupDate}>{moment(mkData.time.toDate()).format('Do MMM YYYY')}</Text>
                <View style={gStyle.SupContainer}>
                    <Image
                    source={{uri:mkData.image}}
                    style={gStyle.SupImg}
                    />
                    <View style={gStyle.SupForm}>
                        <View style={gStyle.SupPrice}>
                            <Text style={gStyle.SupPrice1}>Цена: </Text>
                            <Text style={gStyle.SupNumber}>{mkData.price} Р.</Text>
                        </View>
                    </View>
                    <Text style={gStyle.SupDescription}>
                        {mkData.description}
                    </Text>
                    <Text style={gStyle.SupLine}></Text>
                        <View style={gStyle.SupContaier1}>
                            <View style={gStyle.SupBox1}>
                                <Ionicons name="person-outline" size={30} color="black" />
                                <Text style={gStyle.SupPerson}>{mkData.person} человек</Text>
                            </View>
                            <View style={gStyle.SupBox1}>
                                <MaterialCommunityIcons
                                    name="clock-time-four-outline"
                                    size={30}
                                    color="black"
                                />
                                <Text style={gStyle.SupAlarm}>{mkData.timeOfMK} час(а)</Text>
                            </View>
                        </View>
                        <Text style={gStyle.SupLine}></Text>
                        {userAuthenticated ?
                                    <Pressable style={gStyle.SupMoreDetails} 
                                    onPress={()=>navigation.navigate('Profile')}
                                    >
                                        <Text style={gStyle.SupBtn}>Забронировать</Text>
                                    </Pressable>
                                    :
                                    <Pressable style={gStyle.SupMoreDetails}
                                    onPress={()=>navigation.navigate('Auth')}
                                    >
                                        <Text style={gStyle.SupBtn}>Забронировать</Text>
                                    </Pressable>
                                    }
                        {/*<Pressable style={gStyle.SupMoreDetails} 
                        onPress={bookMK}
                        >
                            <Text style={gStyle.SupBtn}>Забронировать</Text>
  </Pressable>*/}
                </View>
            </View>
        </View>
        <Footer/>
        </ScrollView>
    </View>
  );
}

import { Text, View, Image, ScrollView, Pressable } from 'react-native';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { gStyle } from '../styles/style';
import { firebase } from '../Firebase/firebase';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/firestore';
import React, {useState, useEffect} from 'react';
import { useNavigation } from '@react-navigation/native';



export default function Profile() {
    const navigation = useNavigation();
    const [userId, setUserId]=useState(null);
        const [userData, setUserData] = useState(null);
        const [bookedMK, setBookedMK] = useState([]);
        useEffect(()=>{
            const unsubscribe=firebase.auth().onAuthStateChanged((user)=>{
                if(user){
                    setUserId(user.uid);
                }else{
                    setUserId(null);
                }
            });
            return()=>unsubscribe();
        },[])
        useEffect(() => {
                if(userId){
                    const userRef=firebase.database().ref(`users/${userId}`);
                    userRef.on('value', snapshot=>{
                        const data = snapshot.val();
                        setUserData(data);
        },[userId]);
        const bookedMKRef = firebase.database().ref(`users/${userId}/bookedMK`);
            bookedMKRef.on('value', snapshot => {
                const data = snapshot.val();
                if (data) {
                const mk = Object.values(data);
                setBookedMK(mk);
                } else {
                setBookedMK([]);
                }
            });

            // Cleanup function which will remove the listeners when the component is unmounted
            return () => {
                userRef.off();
                bookedMKRef.off();
                
  };
                }
            
        
    },[userId])
        const handleLogOut = async () => {
            try {
            await firebase.auth().signOut();
            navigation.navigate('Auth');
            } catch (error) {
            console.error(error);
            }
            };

  return (
    <View>
        <ScrollView>
                <Header/>
                <View style={gStyle.main}>
        <View style={gStyle.ProfileBox}>
            <View style={gStyle.ProfileGreeting}>
                <Text style={gStyle.ProfileName}>{userData?.name},</Text>
                <Text style={gStyle.ProfileHello}>Добро пожаловать в{'\n'}личный кабинет</Text>
            </View>
            <View style={gStyle.ProfileBlock}>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Имя</Text>
                    <View style={gStyle.ProfileInfo}>
                        <Text style={gStyle.ProfileValue}>{userData?.name}</Text>
                    </View>
                </View>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Фамилия</Text>
                    <View style={gStyle.ProfileInfo}>
                    <Text style={gStyle.ProfileValue}>{userData?.surname}</Text>
                    </View>
                </View>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Электронная почта</Text>
                    <View style={gStyle.ProfileInfo}>
                    <Text style={gStyle.ProfileValue}>{userData?.email}</Text>
                    </View>
                </View>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Номер телефона</Text>
                    <View style={gStyle.ProfileInfo}>
                    <Text style={gStyle.ProfileValue}>{userData?.phone}</Text>
                    </View>
                </View>
                <Pressable style={gStyle.logout}
                onPress={handleLogOut}
                >
                    <Text style={gStyle.gobacktxt}>Выйти</Text>
                </Pressable>
            </View>
        </View>
        <View style={gStyle.ProfilePaidMK}>
            <Text style={gStyle.ProfilePaid}>Забронированные{'\n'}мастер-классы</Text>
            <Text style={gStyle.ProfileLine}></Text>
            {bookedMK.map((mk, index)=>(
                <View key={index} style={gStyle.ProfileDetails}>
                <Image source={{uri:mk.image}} style={gStyle.ProfileImg}/>
                <View style={gStyle.ProfileDescription}>
                    <Text style={gStyle.ProfileTitleOfMK}>{mk.name}</Text>
                    <Text style={gStyle.ProfileDate}>{mk.time}</Text>
                    <Text style={gStyle.ProfilePrice}>Цена: {mk.price} Р.</Text>
                </View>
            </View>
            ))}
            
            <Text style={gStyle.ProfileLine}></Text>
        </View>
    </View>
    <Footer/>
    </ScrollView>
            </View>
    
  );
}