Settings API in Studio

[88Alex88]

I've had numerous looks at the Settings Guide on Fitbit.com and still whenever I go to open the settings for my Ionic app on my phone, it says settings are unavailable.  What's going on?

Here's my code so far:

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Seperator Bar Color</Text>}>
        <Toggle
          settingsKey="seperatorToggle"
          label="Seperator based on Day Prgress On/Off"
        />
        <ColorSelect
          settingsKey="color"
          colors={[
            {color: 'firebrick'},
            {color: 'darkorange'}, 
            {color: 'gold'},
            {color: 'deepskyblue'},
            {color: 'olivedrab'},
            {color: 'deeppink'},
            {color: 'purple'}
          ]}
        />
      </Section>
      <Select
        label={`Type of Day`}
        settingsKey="schedule"
        options={[
          {name:"Regular"},
          {name:"No School"},
          {name:"2 Hour Delay"},
          {name:"PM Activity"},
          {name:"Assembly"},
          {name:"7 Period"},
          {name:"Exam"},
        ]}
        />
    </Page>
  );
}

registerSettingsPage(mySettings);

[JonFitbit]

The final <Select> seems to be outside the <Section>.

Does your project also have companion? I think it's required for settings to work.