Dynamically change label on settings page

[aesdev421]

Hello all,

I am trying to build my settings page so the user can change a variable within the app.  I first used a slider and the slider label would update as the user slide their finger across.  However, I have realized the slider is WAY too clunky on the phone.

Now I am trying to swap the design to use an increment button and a decrement button with a label in between to show the current value.  The increment and decrement code is working, however the label is not being updated.

Also, will I be able to read this value in the companion?

Any ideas?

Thanks

Slider code

<Slider
     label= {props.settings.flowTimeSlider.substring(1,props.settings.flowTimeSlider.length-1)}
      settingsKey="flowTimeSlider"
       min="0"
       max="240"
/>

Button Code

<Button label="+" onClick={()=> props.settings.flowTimeSlider++ }/>
<Text align="center">{props.settings.flowTimeSlider}</Text>
<Button label="-" onClick={()=> props.settings.flowTimeSlider-- }/>

[aesdev421 · Accepted solution]

After experimenting a while I ended up figuring this out myself.

According to the docs you can manage Settings Key yourself using the following code

onChange={value => this.props.settingsStorage.setItem('color', value)}

so I adapted that to my needs.  One problem I ran into was casting between ints and strings, so it may not be the prettiest, but it does work.

<Button label="+" onClick={()=> {
            props.settings.flowTime = parseInt(props.settings.flowTime) + 1;
            props.settingsStorage.setItem('flowTime', props.settings.flowTime.toString())
        }}/>
        <Text align="center">{props.settings.flowTime}</Text>
        <Button label="-" onClick={()=> {
            props.settings.flowTime = parseInt(props.settings.flowTime) - 1;
            props.settingsStorage.setItem('flowTime', props.settings.flowTime.toString())
         }}/>