09-30-2018 07:54 - edited 09-30-2018 07:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-30-2018 07:54 - edited 09-30-2018 07:57
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I am creating a transit-schedule app.
The application is based on the BART example, but with several customizations. Where the BART app lists all trains leaving a station I want to be able to create station/train(s) sets where the selection of trains are whitelisted and are the only trains shown to the user.
The stations and trains are selected in settings. As in the BART example, I am currently able to set stations using `<AdditiveList>` and `<TextInput onAutoComlplete={(value) => {}}>`.
The flow is like this:
Type text --> shows list of suggested stations --> select station --> station added to additive list
However what I want is something like this:
Type text --> shows list of suggested stations --> select station --> shows toggle button-list of trains --> press save --> station/trains set added to additive list
I've tried a bunch of stuff, but haven't had any success. Any suggestions?
Roughly what i have today: https://gist.github.com/Obliged/bb9eba766058e8ba52b533139c6804b8
Answered! Go to the Best Answer.

Accepted Solutions
10-08-2018 12:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-08-2018 12:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
My approach is rather low-brow. Every second-stage setting element is wrapped in a React conditional statement like this:
{ JSON.parse(props.settingsStorage.getItem("imageSelected")) && <TextInput label="Caption (optional)" placeholder="" settingsKey="caption" /> }
The condition (JSON.parse...) is the same for every element that needs it. (IIRC, a recent update may allow multiple elements to be wrapped within a single such test.)
The setting that triggers the change (in my case 'imageSelected') can be set in your companion index.js using whatever logic you need. You could probably do it directly in the .jsx in many cases, but I still struggle with .jsx syntax.
Gondwana Software
10-03-2018 13:34
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-03-2018 13:34
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I've never used AdditiveList, but I have implemented what I'd call a 'two-stage setting'. Run the Slideshow app by Gondwana, and you'll see that image-specific options only become visible once an image is selected. If this is vaguely related to what you want, hit me up for more details.
Gondwana Software

10-08-2018 09:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-08-2018 09:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Yes! That looks like a solution that could work for me. I'd very much appreciate some more details.
Sidenote:
I'd like to be able to delete saved settings from the Settings menu as well, but that is step 2 at the moment and should probably be solved in a separate <Section> instead of using the AdditiveList.

10-08-2018 12:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-08-2018 12:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
My approach is rather low-brow. Every second-stage setting element is wrapped in a React conditional statement like this:
{ JSON.parse(props.settingsStorage.getItem("imageSelected")) && <TextInput label="Caption (optional)" placeholder="" settingsKey="caption" /> }
The condition (JSON.parse...) is the same for every element that needs it. (IIRC, a recent update may allow multiple elements to be wrapped within a single such test.)
The setting that triggers the change (in my case 'imageSelected') can be set in your companion index.js using whatever logic you need. You could probably do it directly in the .jsx in many cases, but I still struggle with .jsx syntax.
Gondwana Software
10-08-2018 13:15
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-08-2018 13:15
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
PS. This probably won't work on Windows companions due, I suspect, to a bug in the React implementation used by Fitbit on that platform.
Gondwana Software

10-12-2018 06:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-12-2018 06:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
This worked nicely, thanks!
The most important realisation for me was that
props.settingsStorage.setItem(<settingName>)
would prompt the re-rendering of the settings page. I.e. similar to changes to state in normal REACT.
So I created this thing to control it:
function redraw(props) { props.settingsStorage.setItem('redraw', 'true'); }
This allowed me to re-render whenever I wanted to. This in turn gave me the flexibility to use a local class to contain 'temporary' data.
function mySettings(props) { return ( <Page> { !sState.stationSelected && <Section title={<Text bold align="center"> Station selection </Text>}> {quayPicker(props)} </Section> } { sState.stationSelected && <Section title={<Text bold align="center"> {sState.quay.name} </Text>}> {linePicker(props)} </Section> } </Page> ); } const sState = new SettingsState(); registerSettingsPage(mySettings);
10-12-2018 13:53
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-12-2018 13:53
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Nicely structured!
I'd be interested to know if it works on Windows companions for you. I suspect that React doesn't react as it should in that environment.
Gondwana Software
