React-Native: Dynamically Set Image Source with ternary operator

Mixtape Mania 0
Viewed 19

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 "iconName"

enter image description here

        <Image
          source={iconName === "account-outline" ? {require("../../assets/images/account-outline.png")} : 
                  {iconName === "phone-outline" ? {require("../../assets/images/phone-outline.png")} :
                  {iconName === "email-outline" ? {require("../../assets/images/email-outline.png")} : 
                  {require("../../assets/images/lock-outline.png")} } } }
          style={{ height: 22, width: 22, marginRight: 10 }}
        />

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.

When I try to run the above code I get this error:

SyntaxError: C:\Users\jimmy\Documents\carebit newest\Carebit\src\utils\CustomTextInput.js: Unexpected token (41:60)

  39 |       >
  40 |         <Image
> 41 |           source={iconName === "account-outline" ? {require("../../assets/images/account-outline.png")} :
     |                                                             ^
  42 |                   {iconName === "phone-outline" ? {require("../../assets/images/phone-outline.png")} :
  43 |                   {iconName === "email-outline" ? {require("../../assets/images/email-outline.png")} :
  44 |                   {require("../../assets/images/lock-outline.png")} } } }

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 "==="

Android Bundling failed 688ms SyntaxError: C:\Users\jimmy\Documents\carebit newest\Carebit\src\utils\CustomTextInput.js: Unexpected token, expected "," (41:29)

  39 |       >
  40 |         <Image
> 41 |           source={{ iconName === "account-outline" ? {require("../../assets/images/account-outline.png")} : 
     |                              ^
  42 |                   {iconName === "phone-outline" ? {require("../../assets/images/phone-outline.png")} :
  43 |                   {iconName === "email-outline" ? {require("../../assets/images/email-outline.png")} : 
  44 |                   {require("../../assets/images/lock-outline.png")} } } }}

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?

conditional-operator react-native image reactjs
1 Answers

You can not dynamic require image assets at run-time. All required local images are bundled at compile time and you can hold reference of that images and use them at run-time.

// Bundle icon image at compile time
const localIcons = {
  account: require("../../assets/images/account-outline.png"),
  phone: require("../../assets/images/phone-outline.png"),
  email: require("../../assets/images/email-outline.png"),
};

// Dynamically access icon image by name
const getIconByName = (name) => {
  switch (name) {
    case "account-outline":
      return localIcons.account;
    case "phone-outline":
      return localIcons.phone;
    case "email-outline":
      return localIcons.email;
  }
};

// Render Image component

  <Image
    source={getIconByName("account-outline")}
    style={{ height: 22, width: 22, marginRight: 10 }}
  />
Fiston Emmanuel0
Related