title: React Native - Components not loading
body: <p>Having a strange issue in React Native - I'm trying to build a list of cards, where each card represents a card with user information (e.g. first name, last name, etc).</p>
  <p>The card is a separate component that takes an <code>_id</code> prop. The <code>_id</code> is then used in the Card component to fetch the data. The cards are then instantiated like this:</p>
  <p><strong>Card.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  
  import {
    View,
    Text,
    Image,
    StyleSheet
  } from 'react-native';
  
  const Card = (props) =&gt; {
     const [bio, setBio] = useState(true) 
     const [email, setEmail] = useState(true) 
     const [firstName, setFirstName] = useState(true) 
     const [lastName, setLastName] = useState(true) 
     const [phoneNumber, setPhoneNumber] = useState(true) 
     const [photoData, setPhotoData] = useState(true) 
  
     const baseUrl = &quot;node-js-backend-url&quot;
     const fileReaderInstance = new FileReader();
     
     loadImage = (url, headers) =&gt; {
        fetch(url, {headers})
        .then(response =&gt; response.blob())
        .then(blob =&gt; {
           fileReaderInstance.readAsDataURL(blob);
           fileReaderInstance.onload = () =&gt; {
              base64Data = fileReaderInstance.result;
              setPhotoData(base64Data);
           }
        })
        .then(() =&gt; {
           console.log(&quot;Card details: &quot;)
           console.log(firstName)
           console.log(lastName)
        })
        .catch(error =&gt; {
           console.log(&quot;Error getting image for card: &quot; + props._id + &quot;, token: &quot; + props.token+ &quot;, &quot;+ error)
        });
     }
  
     loadCardData = (url) =&gt; {
        let headers = new Headers()
        headers.append(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);
        headers.append(&quot;x-auth-token&quot;, props.token)
  
        fetch(url, {headers})
        .then(response =&gt; response.json())
        .then(data =&gt; {
           setFirstName(data.firstName ? data.firstName : null)
           setLastName(data.lastName ? data.lastName : null)
           setBio(data.bio ? data.bio : null)
           setEmail(data.email ? data.email : null)
           setPhoneNumber(data.phoneNumber ? data.phoneNumber : null)
  
           var photoUrl = baseUrl + &quot;/api/card/&quot; + data._id + &quot;/file/image/&quot; + data.photo.filename;
           loadImage(photoUrl, headers)
        })
        .catch(error =&gt; {
           console.log(&quot;Error fetching card data for card: &quot; + props._id + &quot;, token: &quot; + props.token + &quot;, &quot; + error)
           
        });
     }
  
     useEffect(() =&gt; {
           let url = baseUrl + &quot;/api/card/&quot; + props._id
           loadCardData(url)
           console.log(&quot;Successfully loaded card.&quot;)
     }, []);
  
    return (
      &lt;&gt;
           &lt;View 
              style={cardStyles.outerView}
           &gt;
              &lt;View style={cardStyles.photoView}&gt;
                 &lt;Image
                    source={{
                       uri: photoData.length &gt; 0 ? photoData : null
                     }}
                     style={cardStyles.portrait}
                 &gt;&lt;/Image&gt;
              &lt;/View&gt;
              &lt;View style={cardStyles.infoView}&gt;
                 &lt;Text style={cardStyles.names}&gt;{firstName} {lastName}&lt;/Text&gt;
                 &lt;Text style={cardStyles.bio}&gt;{bio}&lt;/Text&gt;
                 &lt;Text style={cardStyles.contact}&gt;{email}&lt;/Text&gt;
                 &lt;Text style={cardStyles.contact}&gt;{phoneNumber}&lt;/Text&gt;
              &lt;/View&gt;
           &lt;/View&gt;
      &lt;/&gt;
    );
  };
  
  const cardStyles = StyleSheet.create({
     outerView: {
        backgroundColor: '#F9F8F8',
        shadowColor: &quot;#000&quot;,
        shadowOffset: {
           width: 0,
           height: 2,
        },
        shadowOpacity: 0.23,
        shadowRadius: 2.62,
        elevation: 4,
        borderRadius: 10,
        padding: 15,
        flexDirection: &quot;row&quot;,
        justifyContent: &quot;center&quot;,
        alignItems: &quot;center&quot;
     },
     names: {
        fontSize: 18,
        margin: 5
     },
     bio: {
        margin: 10
     },
     contact: {
        fontSize: 14
     },
     photoView: {
        flex: 0.425,
        width: 100,
        height: 100,     
        borderRadius: 250, 
        marginRight: 15,
        backgroundColor:&quot;#FFFFFF&quot;,
        justifyContent: &quot;center&quot;,
        alignItems: &quot;center&quot;
     },
     portrait: {
        flex: 1,
        width: &quot;100%&quot;,
        height: &quot;100%&quot;,
        resizeMode: 'contain',
        borderRadius: 100,
     },
     infoView: {
        flex: 1
     }
  })
  
  export default Card;
  
  </code></pre>
  <p><strong>Connections.js</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { styles } from '../styles/styles'
  import Card from '../components/Card'
  
  import {
    SafeAreaView,
    View,
    ScrollView,
    Text,
    StatusBar,
    StyleSheet
  } from 'react-native';
  
  const ContactsPage: () =&gt; React$Node = () =&gt; {
    const baseUrl = &quot;node-js-backend-url&quot;
    const token = &quot;[x-auth-token-for-testing]&quot;
    
    const [connections, setConnections] = useState([]) 
    const [loading, setLoading] = useState() 
  
    loadConnections = () =&gt; {
      let headers = new Headers()
      headers.append(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);
      headers.append(&quot;x-auth-token&quot;, token)
  
      let url = baseUrl + &quot;user/connections&quot;
      console.log(&quot;url: &quot; + url)
  
      fetch(url, {headers})
      .then(response =&gt; response.json())
      .then(data =&gt; {
        setConnections(data.connections)
        setLoading(false)
      })
      .catch(error =&gt; {
          console.log(&quot;Error fetching connections: &quot; + error)
      });
    }
    useEffect(() =&gt; {
      setConnections([])
      setLoading(true)
      loadConnections()
    }, []);
  
    return (
      &lt;&gt;
          &lt;StatusBar barStyle=&quot;dark-content&quot; /&gt;
          &lt;SafeAreaView style={styles.container}&gt;
            &lt;View style={styles.heading}&gt;
              &lt;Text style={styles.headline}&gt;Connections&lt;/Text&gt;
            &lt;/View&gt;
            &lt;ScrollView style={styles.body, cardStyles.cardList}&gt;
              {/* {loading == true &amp;&amp; &lt;Text&gt;Loading...&lt;/Text&gt;}
              {(loading == false &amp;&amp; connections.length == 0) &amp;&amp; &lt;Text&gt;You have no connections yet! Add some to get started...&lt;/Text&gt;}
              {(loading == false &amp;&amp; connections.length &gt; 0) &amp;&amp; connections.map(connection =&gt; (&lt;Card key={connection} _id={connection} token={token}&gt;&lt;/Card&gt;))} */}
              {/* {( loading == false  */}
                {/* &lt;Card key=&quot;card1&quot; _id=&quot;6005ef770aeb9b3a7035311f&quot; token={token} style={cardStyles.card}&gt;&lt;/Card&gt; */}
                {/* &lt;Card key=&quot;card2&quot; _id=&quot;6011d9d39689ab00049fc6e8&quot; token={token} style={cardStyles.card}&gt;&lt;/Card&gt; */}
                {/* &lt;Card key=&quot;card3&quot; _id=&quot;6005ef770aeb9b3a7035311f&quot; token={token} style={cardStyles.card}&gt;&lt;/Card&gt; */}
                &lt;Card key=&quot;card4&quot; _id=&quot;6011d9d39689ab00049fc6e8&quot; token={token} style={cardStyles.card}/&gt;
                &lt;Card key=&quot;card5&quot; _id=&quot;6005ef770aeb9b3a7035311f&quot; token={token} style={cardStyles.card}/&gt;
            &lt;/ScrollView&gt;
          &lt;/SafeAreaView&gt;
      &lt;/&gt;
    );
  };
  
  const cardStyles = StyleSheet.create({
    card: {
      marginTop: 10,
      marginBottom: 10
    },
    cardList: {
      height: &quot;80%&quot;
   }
  })
  
  export default ContactsPage;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/c2GD8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c2GD8.png" alt="Console logging card data, cards can be seen being loaded successfully" /></a>
  <a href="https://i.stack.imgur.com/ICG0s.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ICG0s.jpg" alt="Screenshot of connections page" /></a></p>
  <p>The result is that 2 cards are rendered, however only the last card contains any information. If I create only a single card, all the information is shown as expected. Adding more than two cards results in all but the last being unpopulated (i.e. not showing the user data).</p>
  <p>The interesting part is that the correct data is loaded even for cards that don't show it. Logging the retrieval of each card's data shows that user data has been set in the state. Also, the margins from the card style are not applied. What could be the case of this, and how can it be fixed?</p>