i need that when user clicks on button is sends the message on his email that they have successfully booked this post and then they can see it in profile
here is code of post
import { Text, View, Image, Pressable, ScrollView } from 'react-native';
import { gStyle } from '../styles/style';
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';

export default function SignUpForMK({route}) {
    const {mkData}=route.params;
    const navigation = useNavigation();
  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>
                        <Pressable style={gStyle.SupMoreDetails} 
                        onPress={()=>navigation.navigate('FormAddMK')}
                        >
                            <Text style={gStyle.SupBtn}>Записаться</Text>
                        </Pressable>
                </View>
            </View>
        </View>
        <Footer/>
        </ScrollView>
    </View>
  );
}


here is code of profile
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 [userData, setUserData] = useState(null);
        
        useEffect(() => {
        const currentUserID = firebase.auth().currentUser.uid;
        
        firebase
        .database()
        .ref('users/' + currentUserID)
        .once('value')
        .then((snapshot) => {
        const data = snapshot.val();
        setUserData(data);
        });
        }, []);

        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>Выйти</Text>
                </Pressable>
            </View>
        </View>
        <View style={gStyle.ProfilePaidMK}>
            <Text style={gStyle.ProfilePaid}>Забронированные{'\n'}мастер-классы</Text>
            <Text style={gStyle.ProfileLine}></Text>
            <View style={gStyle.ProfileDetails}>
                <Image source={FutureMK.image}} style={gStyle.ProfileImg}/>
                <View style={gStyle.ProfileDescription}>
                    <Text style={gStyle.ProfileTitleOfMK}>{fitireMK.name}</Text>
                    <Text style={gStyle.ProfileDate}>{futureMK.time}</Text>
                    <Text style={gStyle.ProfilePrice}>Цена: {futureMK.price} Р.</Text>
                </View>
            </View>
            <Text style={gStyle.ProfileLine}></Text>
        </View>
    </View>
    <Footer/>
    </ScrollView>
            </View>
    
  );
}