Picker Component

• The Picker component is a streamlined and visually integrated way to present a selectable list of options to users in a React Native application. This component utilizes a bottom sheet to allow users to choose from a list, with the flexibility to handle any type of value-associated item. It is particularly useful for options like selecting a category, setting a state, or any other scenario where a choice from multiple options is required.

  This Picker encapsulates items, which are rendered with an optional check icon next to the currently selected item, enhancing user experience by providing clear visual feedback of the current selection. The component is built over a bottom sheet modal, providing a non-intrusive and user-friendly selection process.

  Here's an example of how to use the Picker component:

• 
  

  <Picker
    selectedValue={'value2'}
    onValueChange={(newValue) => console.log('Selected:', newValue)}
    items={[
      {label: 'Spain', value: 'Spain'},
      {label: 'United Kingdom', value: 'United Kingdom'},
      {label: 'United States', value: 'United States'},
    ]}
    handleDismiss={() => console.log('Picker dismissed')}
    headerText="Select Your Country"
  />

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the Component

Firstly, import the Picker component from its module in your project:

import { Picker } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the Picker Component

Utilize the Picker in your interface by specifying the list of items and handling the selection logic:

<Picker
  selectedValue={currentValue}
  onValueChange={handleValueChange}
  items={listOfOptions}
  handleDismiss={closeModal}
  headerText="Choose an option"
/>

Examples

Basic Usage of Picker:

<Picker
  selectedValue={userSelection}
  onValueChange={updateSelection}
  items={[
    { label: 'First Choice', value: 'First' },
    { label: 'Second Choice', value: 'Second' }
  ]}
  handleDismiss={dismissPicker}
/>

Picker with Custom Header:

<Picker
  selectedValue={selectedCountry}
  onValueChange={setCountry}
  items={countryOptions}
  handleDismiss={closePicker}
  headerText="Select Country"
/>

Props

• selectedValue (ItemValue): The currently selected value.
• onValueChange ((value: ItemValue, index: number) => void): Function called when a new value is selected.
• items (Array<{label: string, value: ItemValue, key?: string}>): The items to be displayed in the picker.
• handleDismiss (() => void): Function to call when the picker is dismissed.
• headerText (string): Text to display as the header of the picker modal.

For more details on the props, please refer to the Picker Props.