FlatList nie widać ikon

const link = require('../assets/logo.png');

const product = [
  {
    title: 'pierwszy',
    image: 'link'
  },
  {
    title: 'drugi',
    image: 'link'
  },
  {
    title: 'trzeci',
    image: 'link'
  },
  {
    title: 'cztery',
    image: 'link'
  }
];

function ServiceHandler() {
  () => navigation.navigate('Service')
}

function ServiceScreen() {

  const navigation = useNavigation();

  return (
    <BackgroundImage>
      <CustomHeader backButton={() => navigation.navigate('Home')} />
      <View style={styles.rootContainer}>
        <SafeAreaView >
        <FlatList 
          numColumns={3}
          data={product}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (<Product product={item} />)}></FlatList>
          </SafeAreaView>
      </View>
    </BackgroundImage>
  );
}

import React from "react";
import { View, Text, Image} from "react-native";

class Product extends React.Component {
    render(){
        const {title, image} = this.props.product
        return (
            <View style={{width:'48%', alignItems: 'center', borderWidth: 0.75, marginHorizontal:'1%', borderColor: 'white'}}>
                <Text>{title}</Text>
                <Image source={{image}}/>
            </View>
        )
    }
}

export default Product;

const link = require('../assets/logo.png');

const product = [
  {
    title: "Lorem ipsum",
    image: link
  }
];

import React, { useState } from "react";
import ReactDOM from "react-dom";

// Zamieniłem tablicę na obiekt, żeby uprościć dodawanie i usuwanie elementów z listy
const products = {
  1: { // <-- klucz musi być zawsze równy id
    id: 1,
    title: "Lorem ipsum 1",
    image: "...",
    imageAlt: "..."
  },
  2: {
    id: 2,
    title: "Lorem ipsum 2",
    image: "...",
    imageAlt: "..."
  },
  3: {
    id: 3,
    title: "Lorem ipsum 3",
    image: "...",
    imageAlt: "..."
  },
  //...
  1023: {
    id: 1023,
    title: "Lorem ipsum 1023",
    image: "...",
    imageAlt: "..."
  }
};

// Do komponentu Product przekazujemy funkcję toggleProduct, która odpowiada za dodanie lub usunięcie produktu z listy
const Product = ({ toggleProduct, ...product }) => (
  <div style={{ marginTop: "15px" }}>
    {product.title}
    <img src={product.image} alt={product.imageAlt} />
    {toggleProduct && (
      <button onClick={() => toggleProduct(product.id, product)}>
        Zmień status
      </button>
    )}
  </div>
);

const App = () => {
  // Tworzymy stan
  const [activeProducts, setActiveProducts] = useState({});

  // Tworzymy funkcję odpowiedzialną za dodawanie i usuwanie produktu
  const toggleProduct = (id, product) => {
    if (activeProducts[id]) {
      setActiveProducts((prevProducts) => {
        delete prevProducts[id];

        // Jeśli aktualizujemy stan, który jest tablicą, lub obiektem to musimy zwrócić całkowicie nową wartość
        return { ...prevProducts }; 
      });
    } else {
      setActiveProducts({
        ...activeProducts,
        [id]: product
      });
    }
  };

  return (
    <>
      Lista wszystkich produktów:
      {/* Teraz cała lista jest w formie obiektu, więc przy wyświetlaniu musimy z powrotem przekształcić ją w tablice */}
      {Object.values(products).map((props) => (
        <Product key={props.id} {...props} toggleProduct={toggleProduct} />
      ))}
      <br />
      <br />
      Lista aktywnych produktów:
      {Object.values(activeProducts).map((props) => (
        <Product key={props.id} {...props} />
      ))}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

class Product extends React.Component {

    const navigation = useNavigation();

    render() {
        const { id, image, title, } = this.props.product
        
        return (

            <View style={styles.rootCointener}>
                <TouchableOpacity onPress={() =>  {navigation.replace('Service')}}>
                    <Image style={styles.imageCointener} source={image} />
                </TouchableOpacity>
                <Text style={styles.textCointener}>{title}</Text>
            </View>
        )
    }
}

function  Product(id, image, title) {

    const navigation = useNavigation();
 
        return (

            <View style={styles.rootCointener}>
                <TouchableOpacity onPress={() =>  {navigation.replace('Service')}}>
                    <Image style={styles.imageCointener} source={image} />
                </TouchableOpacity>
                <Text style={styles.textCointener}>{title}</Text>
            </View>