renderItem function help (found in Settings API)

[FlyFrosty]

The renderItem function in settings takes an icon value.  I can get it to put an image of the icon next to the option, but then the return is too big and errors out.  I know there is a way to pass file information, but that looks far more complex than what I need (especially considering I do not need the value part of the return).

I currently have:

import img1 from './landing.jpg';
import img2 from './Kentucky.jpg';
import img3 from './Canyon.jpg';
import img4 from './Ohio.jpg';
import img5 from './Split.jpg';
import img6 from './Hawaii.jpg';
import img7 from './Bahamas.jpg';

and

 <Select
            label={'Background Image'}
            settingsKey="myPic"
              options={[
              {name: "Kentucky.png", value: "2"},
              {name: "Canyon.png", value : "3"},
              {name: "Ohio.png", value : "4"},
              {name: "Split.png", value : "5"},
              {name: "Hawaii.png", value : "6"},
              {name: "Bahamas.png", value : "7"}
            ]}
            
            
            renderItem={
              (option) =>
                <TextImageRow
                  label={option.name}
                  sublabel="Images"
                  icon={img2};
                />

If I change the value to the actual file name I need for the icon size image, it crashes on the messaging.peerSocket.onmessage event.  My thought was to combine img with the value of the selection.  This works for the event pass-back but anytime I try and add any function inside the Select function it crashes.  I have a function which successfully returns the number only of the selection in my app/util.js file.

Any help would be appreciated.

Note: The .png and the .jpg are the same image sized for either the icon or the image background.

[JonFitbit]

If you have the image in the resources folder already, you probably shouldn't try to send that image via the messaging API too. Perhaps just send the filename or index?

You should do something in the companion so you only send the value you need:

https://github.com/Fitbit/sdk-lcd-clock/blob/master/companion/index.js#L4

[FlyFrosty · Accepted solution]

I don't know how to send only part of the select back. 

I figured out that, when you import the .jpg, the resulting file is too big to pass back to the main app.  What I did was import the jpg files, then created an array of all the imported images.  I assign the value part of the select to a simple number.  The icon part of the renderItem function will actually accept the array value.  So...

const myIcon = [img1, img2, img3, img4, img5, img6, img7];

and

settingsKey="myPic"
              options={[
              {name: "Landing.png", value: 0},
              {name: "Kentucky.png", value: 1},

and

renderItem={
              (option) =>
                <TextImageRow
                  label={option.name}
                  sublabel="Location"
                  icon={myIcon[option.value]}
                />
            }  

This is working for me now.

Thanks for the response.