I need to redirect user on the screen with detailed data about PastMK or FutureMK, depends on what the user found. i need it to be simple so i would understand. i already have screens with detailed info
PastMK:
import { Text, View, Image, ScrollView, Pressable} from 'react-native';
import { gStyle } from '../styles/style';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';

export default function PastMKInfo({route}) {
    const navigation = useNavigation();
    const {mkData}=route.params;
    const handleGoBack=()=>{
        navigation.goBack();
    };

  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}>{new Intl.DateTimeFormat('ru-RU',{
                day:'numeric',
                month:'long',
                year:'numeric'
            }).format(mkData.time.toDate())}</Text>
                <View style={gStyle.SupContainer}>
                    <Image
                    source={{uri:mkData.image}}
                    style={gStyle.SupImg}
                    />
                    <Text style={gStyle.SupDescription}>
                    {mkData.description}
                    </Text>
                </View>
            </View>
            <Pressable style={gStyle.goback}
            onPress={handleGoBack}
            >
                <Text style={gStyle.gobacktxt1}>Назад</Text>
            </Pressable>
        </View>
        <Footer/>
        </ScrollView>
    </View>
  );
}


FutureMK:
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}>{new Intl.DateTimeFormat('ru-RU',{
                day:'numeric',
                month:'long',
                year:'numeric',
                hour:'numeric',
                minute:'numeric',
                hour12:false
            }).format(mkData.time.toDate())}</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={bookMK}
                                    >
                                        <Text style={gStyle.SupBtn}>Забронировать</Text>
                                    </Pressable>
                                    :
                                    <Pressable style={gStyle.SupMoreDetails}
                                    onPress={()=>navigation.navigate('Auth')}
                                    >
                                        <Text style={gStyle.SupBtn}>Забронировать</Text>
                                    </Pressable>
                                    }

                </View>
            </View>
        </View>
        <Footer/>
        </ScrollView>
    </View>
  );
}

its the component from where the user must be redirected:
import { Text, View, Image, Pressable } from 'react-native';
import { gStyle } from '../styles/style';
import React from 'react';


export default function Result({ item, onPress }) {

  return (
        <View style={[gStyle.bookedMK, {flex:1}]}>
            <View style={{ flexDirection: 'column' }}>
            <View style={gStyle.ProfileDetails1}>
                <Image source={{uri:item.image}} style={gStyle.ProfileImg1}/>
                <View style={gStyle.ProfileDescription}>
                    <Text style={gStyle.ProfileTitleOfMK1}>{item.name}</Text>
                    <Text>
                    {item.description.length > 100
                            ? item.description.substring(0, 100)+'...'
                            : item.description
                            }
                    </Text>
                </View>
            </View>
            </View>
            <Pressable
            style={gStyle.readmore}
            onPress={()=>onPress(item)}
            >
                <Text style={gStyle.readmoretxt}>Подробнее</Text>
            </Pressable>
            <Text style={gStyle.ProfileLine}></Text>
        </View>
    
  );
}

its search screen:
import { Text, View, TextInput, Pressable, ScrollView, Alert, TouchableHighlight, TouchableOpacity, Image } from 'react-native';
import { gStyle } from '../styles/style';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { useNavigation, useRoute } from '@react-navigation/native';
import { firebase } from '../Firebase/firebase';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/firestore';
import React, {useState} from 'react';
import Result from '../components/Result';

export default function Search() {
    const navigation = useNavigation();
    const route = useRoute();
    const results = route.params?.results || [];
    
  return (
    <View>
        <ScrollView>
        <Header/>
        <View style={gStyle.main}>
        <Text style={gStyle.header}>Результаты поиска</Text>
        <View style={[gStyle.bookedMK, {flex:1}]}>
            <View style={{ flexDirection: 'column' }}>
            {results.length > 0 ? (
                results.map((item, index)=>( 
                <Result key={index} item={item}/>))
            ): (
                <Text style={gStyle.nothing}>По вашему запросу ничего{"\n"}не найдено.</Text>
            )}
            </View>
            </View>
        </View>
        <Footer/>
        </ScrollView>
    </View>
  );
}