Как передать изображение в качестве опоры для пользовательского компонента?

Question

У меня есть пользовательский компонент и плоский список на экране поиска, я пытаюсь загрузить каждый результат в пользовательский компонент. Данные внутри плоского списка - это массив объектов, который является ответом от API. Когда я передаю изображение, имя и другие данные пользовательскому компоненту для отображения на карте, загружается только стиль без данных.

Вот мой код

Карта. js :

    const Card = (props) => {
    return (
        <View style={styles.containerStyle}>

                    <View>
                        <Image
                            source = {{uri : props.source}}
                            style={{ borderRadius: 100, width: 80, height: 80, margin: 10 }}
                        />
                    </View>
                    <View style={{ marginLeft: 15, margin: 10 }}>
                        <Text>{props.name}</Text>
                        {/* <Text>{props.cuisine}</Text>
                        <Text>{props.cost}</Text> */}
                    </View>
        </View>
    )
}

Main. js:

<FlatList
    data={this.state.data}
    keyExtractor={(x, i) => x + i}
    renderItem={({ item }) => 
              <Card 
                 source = {item.thumb} 
                 name = {item.name}    
              />
     }
/>

Изображение только для большей ясности