Wyświetlenie listy obrazków z opisem

Próbuje wyświetlić listę obrazków wraz z opisem.

Komponent którym wywołuje listę

 <FlatList
    numColumns={3}
    data={employee}
    keyExtractor={item => item.id}
    renderItem={({ item }) => (<EmployeeComponet {...item} />)}></FlatList>

i mój drugi komponent Emoployee

W takim przypadku działa jak na sztywno ustawie scieżkę

function EmployeeComponet({id, url, name}) {
    console.log("TEST  " + "\'" + url  +  "\'");
    const value = require('../../assets/servicesIcons/baleyage.png');
    return (
        <View>
            <View style={styles.container}>
                <TouchableOpacity>
                    <Image  source={value} />
                </TouchableOpacity>
                <Text style={styles.title}>{name}</Text>
            </View>
        </View>
    )
};

Przypadku jak podstawie za url to już nie działa i nie łapie mi obrazków. Co zrobić aby to działało poprawnie ?

<Image  source={{require:("\'" + url  +  "\'")}} /> 

Patrzę w dokumentację React Native i piszą tam o używaniu require w kontekście obrazków.
https://reactnative.dev/docs/image
ale w ich przykładzie jest to wrzucane bezpośrednio do właściwości source:

 source={require('@expo/snack-static/react-native-logo.png')}

ty wrzucasz to tak:

<Image  source={{require:("\'" + url  +  "\'")}} /> 

czyli w zasadzie tworzysz obiekt o właściwości require:

{
  require: ("\'" + url  +  "\'")
}

czyli robisz coś innego niż w przykładzie.

Chociaż w tym przykładzie jest też podobny pattern z obiektem, ale jest tam uri, a nie require:

source={{
         uri: 'https://reactnative.dev/img/tiny_logo.png',
}}

W dokumentacji jest taki fragment

https://reactnative.dev/docs/images.html

In order for this to work, the image name in require has to be known statically.

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
  ? 'my-icon-active'
  : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

który informuje nas o tym, że cała ścieżka musi być znana w momencie kompilacji i nie można w tym wypadku przekazać do require zmiennej, ponieważ React Native tego nie łapie :P

Więc możesz skorzystać z wersji source={{ uri: '...' }}, która nie ma takiego ograniczenia, albo przenieść require do komponentu "wyżej" i niech on importuje odpowiednie zdjęcie

function Employee({ id, image, name }) {
  // ...
 
  return (
    <View>
      <Text style={styles.title}>{name}</Text>
      <Image source={image} />
    </View>
  )
}

<Employee image={require('./images/franek.jpg')} /> // <-- ta ścieżka musi być podana jako "całość"
<Employee image={{ uri: `https://example/static/images/${name}.jpg`, }} /> // <-- ale tutaj można użyć zmiennej