title: React-Native: Dynamically Set Image Source with ternary operator
body: <p>I have images files saved locally as PNGs in my react project, and what i'm trying to do is set an image source dynamically based on the string value of a variable called &quot;iconName&quot;</p>
  <p><a href="https://i.stack.imgur.com/z0WMM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z0WMM.png" alt="enter image description here" /></a></p>
  <pre><code>        &lt;Image
            source={iconName === &quot;account-outline&quot; ? {require(&quot;../../assets/images/account-outline.png&quot;)} : 
                    {iconName === &quot;phone-outline&quot; ? {require(&quot;../../assets/images/phone-outline.png&quot;)} :
                    {iconName === &quot;email-outline&quot; ? {require(&quot;../../assets/images/email-outline.png&quot;)} : 
                    {require(&quot;../../assets/images/lock-outline.png&quot;)} } } }
            style={{ height: 22, width: 22, marginRight: 10 }}
          /&gt;
  </code></pre>
  <p>I'm not sure what is the correct way to format this chain of ternary operators in this situation or if there is a better alternative to using a ternary operator all together.</p>
  <p>When I try to run the above code I get this error:</p>
  <pre><code>SyntaxError: C:\Users\jimmy\Documents\carebit newest\Carebit\src\utils\CustomTextInput.js: Unexpected token (41:60)
  
    39 |       &gt;
    40 |         &lt;Image
  &gt; 41 |           source={iconName === &quot;account-outline&quot; ? {require(&quot;../../assets/images/account-outline.png&quot;)} :
       |                                                             ^
    42 |                   {iconName === &quot;phone-outline&quot; ? {require(&quot;../../assets/images/phone-outline.png&quot;)} :
    43 |                   {iconName === &quot;email-outline&quot; ? {require(&quot;../../assets/images/email-outline.png&quot;)} :
    44 |                   {require(&quot;../../assets/images/lock-outline.png&quot;)} } } }
  </code></pre>
  <p>From here what I tried to do is surround the whole ternary operator chain in brackets {}, and doing it that way the error moves to the &quot;===&quot;</p>
  <p>Android Bundling failed 688ms
  SyntaxError: C:\Users\jimmy\Documents\carebit newest\Carebit\src\utils\CustomTextInput.js: Unexpected token, expected &quot;,&quot; (41:29)</p>
  <pre><code>  39 |       &gt;
    40 |         &lt;Image
  &gt; 41 |           source={{ iconName === &quot;account-outline&quot; ? {require(&quot;../../assets/images/account-outline.png&quot;)} : 
       |                              ^
    42 |                   {iconName === &quot;phone-outline&quot; ? {require(&quot;../../assets/images/phone-outline.png&quot;)} :
    43 |                   {iconName === &quot;email-outline&quot; ? {require(&quot;../../assets/images/email-outline.png&quot;)} : 
    44 |                   {require(&quot;../../assets/images/lock-outline.png&quot;)} } } }}
  </code></pre>
  <p>Is there a particular way I should be formatting this, am i placing the brackets wrong? Is it even possible to do this with an image source?</p>