I would like to know how I can update the like (heart) based on the id

you can manage that by two approach -first one by using general state holds the state of three cards and pass it to the cards like that

   const [liked, setLiked] = useState({
    1:false,
    2:false,
    3:false
    });
      
      function onPicLike(id)
      {
        alert(id);
          setLiked(prevState=>({...prevState,[id]:!prevState[id]}));
        
      };  
    ......
     <Card image={require('./assets/picture1.png')} liked={liked[1]} id={1} onLike={onPicLike}/>
<Card image={require('./assets/picture1.png')} liked={liked[2]} id={2} onLike={onPicLike}/>
.....

• second approach by manage each card state in it's component so you don't need to pass onPickLike function or liked state.

  export default function Card({image,  id}) {
   const [liked,setLiked] = useState(false) 
     return (
           <View style={styles.card}>
             <View style={{justifyContent: 'center', alignItems: 'center'}}>
               <TouchableWithoutFeedback onLongPress={() =>setLiked(!liked)}>
                   <Image source={image} style={{width: 50, height: 50, resizeMode: 'contain', borderRadius: 20}}/>
               </TouchableWithoutFeedback>
             </View>
             <View style={styles.footer}>
               <Text style={[{ flex: 1}, styles.actionButtons]}>
                 Comment
               </Text>
               <Text style={[styles.actionButtons, {marginRight: 5}]}>
                 Like
               </Text>
               <TouchableOpacity onPress={() =>setLiked(!liked)}>
                   <FontAwesome name="heart" size={16} color={liked ? "red" : "grey"} />
               </TouchableOpacity>
             </View>
           </View>
     );
   }