11-17-2018 11:36
11-17-2018 11:36
I am attempting to set a custom icon in a TextImageRow setting, but am attempting to link to a local asset instead of a url.
My current code which works with a URL is:
<Toggle label="Enable Selections" settingsKey="toggleTextInput" /> <Select label={`Selections`} disabled={!(props.settings.toggleTextInput === "true")} settingsKey="multiselection" options={[ {name:"One", value:"1"}, {name:"Two", value:"2"}, {name:"Three", value:"3"}, {name:"Four", value:"4"}, {name:"Five", value:{icon: 'https://tinyurl.com/ybbmpxxq'} } ]} renderItem={ (option) => <TextImageRow label={option.name} icon={option.value.icon} /> }
What I would like to do instead is:
import purple from "../resources/images/purple.png" <Toggle label="Enable Selections" settingsKey="toggleTextInput" /> <Select label={`Selections`} disabled={!(props.settings.toggleTextInput === "true")} settingsKey="multiselection" options={[ {name:"One", value:"1"}, {name:"Two", value:"2"}, {name:"Three", value:"3"}, {name:"Four", value:"4"}, {name:"Five", value:{icon: {purple}} } ]} renderItem={ (option) => <TextImageRow label={option.name} icon={option.value.icon} /> }
When I do this, I get a blank place holder instead of the image.
Also, If I simply render icon={purple} it does work, however the image is the same for all the selections and I wish to have a different image for each selection.
Any help is appreciated.
Answered! Go to the Best Answer.
11-17-2018 16:18
11-17-2018 16:18
I found this in one of my old settings program... I don't know if it is what you are looking for.
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'; import img8 from './Beach.jpg'; const myIcon = [img1, img2, img3, img4, img5, img6, img7, img8]; function mySettings(props) { return ( <Page> <Section title={<Text bold align="center">Font Color Settings</Text>}> <ColorSelect settingsKey="color" colors={[ {color: "black"}, {color: "white"}, {color: "lightgray"}, {color: "darkgray"}, {color: "blue"}, {color: "deepskyblue"}, {color: "purple"}, {color: "brown"}, {color: "plum"}, {color: "red"} ]} /> </Section> <Section> <Select label={<Text bold align="center">Touch to Select Background Image</Text>} settingsKey="myPic" options={[ {name: "Landing.png", value: 0}, {name: "Kentucky.png", value: 1}, {name: "Canyon.png", value : 2}, {name: "Ohio.png", value : 3}, {name: "Split.png", value : 4}, {name: "Hawaii.png", value : 5}, {name: "Bahamas.png", value : 6}, {name: "Beach.png", value : 7} ]} renderItem={ (option) => <TextImageRow label={option.name} sublabel="Location" icon={myIcon[option.value]} /> } /> </Section> </Page> ); } registerSettingsPage(mySettings);
11-17-2018 16:18
11-17-2018 16:18
I found this in one of my old settings program... I don't know if it is what you are looking for.
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'; import img8 from './Beach.jpg'; const myIcon = [img1, img2, img3, img4, img5, img6, img7, img8]; function mySettings(props) { return ( <Page> <Section title={<Text bold align="center">Font Color Settings</Text>}> <ColorSelect settingsKey="color" colors={[ {color: "black"}, {color: "white"}, {color: "lightgray"}, {color: "darkgray"}, {color: "blue"}, {color: "deepskyblue"}, {color: "purple"}, {color: "brown"}, {color: "plum"}, {color: "red"} ]} /> </Section> <Section> <Select label={<Text bold align="center">Touch to Select Background Image</Text>} settingsKey="myPic" options={[ {name: "Landing.png", value: 0}, {name: "Kentucky.png", value: 1}, {name: "Canyon.png", value : 2}, {name: "Ohio.png", value : 3}, {name: "Split.png", value : 4}, {name: "Hawaii.png", value : 5}, {name: "Bahamas.png", value : 6}, {name: "Beach.png", value : 7} ]} renderItem={ (option) => <TextImageRow label={option.name} sublabel="Location" icon={myIcon[option.value]} /> } /> </Section> </Page> ); } registerSettingsPage(mySettings);