Select

A select picker that slides up from the bottom of the screen.

alt text

Usage

<Select
  label="Your favourite Sport"
  onChange={value => this.setState({ value })}
  placeholder="Select a sport..."
  value={this.state.value} // store in state or context
  options={["Football", "Baseball", "Supercars", "Formula 1", "Hockey"]}
  hintLabel="What's this?"
  onHintPress={() => console.log("PRESS")}
/>

Options

Alternatively to strings, Your options array can contain objects with 'label' and 'value' keys, if you want your server mutation to contain a different value to the label the user sees.

//this
  options={["Football","Supercars", "Formula 1"]}
// or
  options={[
    {
      label: "Football",
      value: "football"
    },
    {
      label: "Supercars",
      value: "supercars"
    },
    {
      label: "Formula 1",
      value: "f1"
    },
  ]}

Props

SelectWithValidation

Use this as a child of the <Form/> component. Form takes care of the value and onChange prop, so these are not required.

<Form>
  {form => (
    <SelectWithValidation
      form={form}
      name="favouriteSport"
      label="Your favourite Sport"
      placeholder="Select a sport..."
      options={["Football", "Baseball", "Supercars", "Formula 1", "Hockey"]}
    />
  )}
</Form>