Settings - Select with TextImageRow

[harpo666]

Hi guys,

In Settings, is there a way to create a select list where each item contains a text image along side the name? Below is what I am trying to achieve but, I cannot get the image to come up.

    <Select
      label="Select with TextImageRow"
      options={[
        { name: 'Label1', value: {location: 'Sub-Label', icon: 'https://xyz'} },
        { name: 'Label2',  value: {location: 'Sub-Label', icon: 'https://xyz'} },
        { name: 'Label3',value: {location: 'Sub-Label', icon: 'https://xyz'} },
        { name: 'Label4', value: {location: 'Sub-Label', icon: 'https://xyz'} },
        { name: 'Label5', value: {location: 'Sub-Label', icon: 'https://xyz'} }
      ]}
    />

[Gondwana · Accepted solution]

I used this:

            renderItem={
              (option) =>
                <TextImageRow
                  label={option.name}
                  icon={colIcons[option.value]}
                />
            }

[harpo666]

Awesome! Thanks Catplace. That worked well.

For anyone else, below is the code I used in settings/index.jsx

const colIcons=['https://tinyurl.com/ybbmpxxq','https://tinyurl.com/ybbmpxxq','https://tinyurl.com/ybbmpxxq'];

function mySettings(props) {
  return (
    <Page>                  
          <Select
          label="Selection with icons"
          settingsKey="listKey"
          options={[
              { name: 'Label1', value: 0 },
              { name: 'Label2', value: 1},
              { name: 'Label3', value: 2}
              ]}
          
          renderItem={
                   (options) =>
                      <TextImageRow
                        label={options.name}
                        icon={colIcons[options.value]}
                      />
                  }
            />
      
    </Page>       
    
  );  
}

[Dcable]

How did you retrieve those keys in the index.js?

[harpo666]

Hi Dcable,

That is correct. There is a good example of this in the part ‘settings in action’:

https://dev.fitbit.com/build/guides/settings/

---