Show/Hide settings element

[writteninr3d]

Hi, I'm writing my first Fitbit app, and want to show or hide an element based on a value in props.settingsStorage. Background, my app will link to a third-party service using an OAuth element. I want to show the <Text> element before the account is linked as it contains a relevant message.

There are a couple of other topics such as this one which say that this is possible using a logical expression of some kind, but I'm not familiar with these enough to know where in the JSX file the logical expression is supposed to be put.

Looking at the Settings API reference, there are similar expressions on attributes such as renderItem and disabled. There was no renderItem attribute on the Text element type. I tried using renderItem on a Text element anyway to see if there was undocumented support, but it did not work.

Can someone who knows more about these expressions provide a little guidance on how/where they should be used, and whether they can be used to toggle the visibility of Text elements?

[Guy_]

Hi @writteninr3d  - if you want things to hide/show in the watch face it's done in the index.js;

some options are

field.style.opacity = 0 or 1

field.style.display =  "none" or "inline"

[Gondwana · Accepted solution]

You have to use a react conditional expression, as in the post you linked. Basically, you wrap your <text> element inside a conditional statement, and rely on 'lazy evaluation' to ensure that your element is only rendered if the condition before it is false.

[writteninr3d]

Hi @Guy_, that's helpful info to know, but this problem is not with the watchface, it's in the Settings area... do you know how I could show/hide a <Text> Settings element that's declared in settings/index.jsx?

[writteninr3d]

Thanks @Gondwana, I didn't know what they are called as I haven't used React before, and it's hard to seek advice on something you don't know what to call 🙂

For anyone else looking for more information about this, I found this page:

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

@Gondwana One final question, you mentioned I should "rely on lazy evaluation" - are there any keywords to declare to enable this or does the platform do it by default?

[Gondwana]

Javascript (and many other languages) do it by default. I just mentioned (and linked to) it so you could understand why the expression does what it does.

[writteninr3d]

The code that worked for me:

function showHideExample(props) {
  return (
    <Page>
      <Toggle settingsKey="myToggle" label="Turn the toggle on to display the text" />
      { JSON.parse(props.settings.myToggle || 'false') && <Text settingsKey="hiddenToggle">This text is only displayed when the toggle is on</Text> }
    </Page>
  );
}

registerSettingsPage(showHideExample);