React / React Native: How to Map over array and show Data on Cards

Question

Im trying to.map() over my array and render cards to the dom. I can show everything in the second object on my card but i cant show source.name ("Engadget") on the card.

I guess because its an Object inside of an object?

So how do iterate over the 'source' object and how it on my cards?

Data Example

"articles": [
-{
  -"source": {
   "id": "engadget",
   "name": "Engadget"
 },

"author": "Igor Bonifacic",
"title": "Apple Wallet’s hotel keycard support is now live, starting at Hyatt hotels",
"urlToImage": "https://s.yimg.com/os/creatr-uploaded-images/2021-12/5d0536d0-5855-11ec-bbe4-0bcb4305d433",

  }
]

Working card example

dataArray.map((newsStory)=> {
    const {  url, urlToImage, title} = newsStory
    
      return (
         <>
        <Card style={styles.card} onPress={()=> {Linking.openURL(url)}}>
            <Card.Cover source={{ uri: urlToImage }} />
//trying to show source in this 'Text'
            <Text style={styles.source}>{source?}</Text>
            <Title style={styles.cardTitle}>{title}</Title>
        </Card> 
    
        </>

Answer 1

Since source is an object, use source.name

dataArray.map((newsStory)=> {
    const {  url, urlToImage, title} = newsStory
    
      return (
         <>
        <Card style={styles.card} onPress={()=> {Linking.openURL(url)}}>
            <Card.Cover source={{ uri: urlToImage }} />
//trying to show source in this 'Text'
            <Text style={styles.source}>{newsStory.source.name}</Text>
            <Title style={styles.cardTitle}>{title}</Title>
        </Card> 
    
        </>