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

export default function PastMK() {
  const navigation = useNavigation();
  
  return (
    <View style={gStyle.main}>
          <View style={gStyle.PastMKbox}>
            <View style={gStyle.PastMKcontainer}>
              <View style={gStyle.PastMKbox1}>
                <View style={gStyle.PastMKpastImg}>
                  <Image
                    source={require('../assets/example1.jpg')}
                    style={gStyle.PastMKimg}
                  />
                  <View style={gStyle.PastMKinfo}>
                    <Text style={gStyle.PastMKnameOfMK}>Мастер-класс №1</Text>
                    <Text style={gStyle.PastMKdateOfMK}>12.12.2012</Text>
                  </View>
                </View>
                <Text style={gStyle.PastMKdescription}>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                  commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                  Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
                  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
                  vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.
                </Text>
                <Pressable style={gStyle.PastMKreadMore}
                onPress={()=>navigation.navigate('PastMKInfo')}>
                  <Text style={gStyle.PastMKtxtBtn}>Читать далее</Text>
                </Pressable>
              </View>
            </View>
          </View>
          <Text style={gStyle.PastMKline}></Text>
        </View>
  );
}

I need to show posts from collection named PastMK like here

import { Text, View, Image, Pressable } from 'react-native';
import { gStyle } from '../styles/style';
import React, {useState, useEffect} from 'react';
import { useNavigation } from '@react-navigation/native';
import {firebase} from '../Firebase/firebase';
import moment from 'moment';
import 'firebase/compat/storage';
import 'firebase/compat/firestore';


export default function FutureMK({limit}) {
    const navigation = useNavigation();
    const [futureMKData, setFutureMKData] = useState([]);

    useEffect(() => {
    const fetchData = async () => {
    try {
        let futureMKRef=firebase.firestore().collection('FutureMK').orderBy('time', 'desc');
        if (limit){
            futureMKRef=futureMKRef.limit(limit);
        }
    const snapshot = await futureMKRef.get();
    const data = snapshot.docs.map((doc) => ({id:doc.id, ... doc.data()}));
    const storage=firebase.storage();
    const updatedData = await Promise.all(data.map(async(mkData)=>{
        const imagePath = mkData.image;
        const imageRef = storage.ref().child(imagePath);
        const url = await imageRef.getDownloadURL();
        return {...mkData, image:url};
    }))
    setFutureMKData(updatedData);
    } catch (error) {
    console.log('Error:',error);
    console.log('futureMKData:', futureMKData);
    console.log('mkData:', mkData);
    }
    };

    fetchData();
    }, [limit]);
  return (
    <View style={gStyle.main}>
        {futureMKData.map((mkData)=>(
            <View key={mkData.id} style={gStyle.mainFMK}>
            <Text style={gStyle.dateFutureMK}>{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.FutureMKimg}>
                <Image source={{uri:mkData.image}} style={gStyle.FutureMKbannerImg}/>
                <Text style={gStyle.FutureMKnameOfMK}>{mkData.name}</Text>
                <Text style={gStyle.hr}></Text>
            </View>
            <Text style={gStyle.FutureMKprice}>Цена: <Text style={gStyle.FutureMKrub}>{mkData.price} P.</Text></Text>
            <Text style={gStyle.FutureMKdescription}>
            {mkData.description.length>100
            ? mkData.description.substring(0,300)+'...'
            : mkData.description}
            </Text>
            <Pressable style={gStyle.FutureMKmoreDetails} 
            onPress={()=>{navigation.navigate('SignUpForMK',{mkData});}}
            >
                <Text style={gStyle.FutureMKbtnTxt}>Подробнее</Text>
            </Pressable>
            <Text style={gStyle.FutureMKline}></Text>
            </View>
        ))}
        
        </View>
  );
}