I am trying to create a Settings page for a custom watch face that uses an AdditiveList to allow the user to add an option to a list. The available options to add are also themselves a list, so I want to use a Selection element to give the user the list of items to select from to add to the AdditiveList. Something like this:
<Page>
<Section
title={
<Text bold align="center">
Settings
</Text>
}
>
<AdditiveList
title="SelectedItems"
settingsKey={"selectedItems"}
renderItem={item => {
if (item && item.name) {
return <Text>{item.name}</Text>
} else {
return null;
}
}}
addAction={
<Select
label="Select a new item"
options={[
{
"name": "Option 2"
},
{
"name": "Option 2"
}
]}
/>
}
/>
/>
/>
However, I find that using a Selection as the addAction in an AdditiveList causes the settings app to crash with "Settings: TypeError: Cannot read property 'name' of undefined". I simplified the app all the way down to as basic as possible, and the error still reproduces.
I have uploaded a stripped-down example to github. If you clone the repo and try it using the CLI or using fitbit studio, you'll see the issue reproduce when you open the settings app
https://github.com/dslane/ions-js/tree/master
Has anyone else seen this issue? Is this a known issue of the 3.1 SDK? Is there a known workaround?
