SelectNative

A select field that opens the platform's native picker (via react-native-picker-select) instead of a custom-rendered dropdown. The visible Field is read-only and only displays the current selection — all interaction happens through the native picker overlay.

React Native

import { SelectNative } from '@hoverinc/design-system-react-native';

<SelectNative
  label="State"
  data={[
    { label: 'California', value: 'CA' },
    { label: 'New York', value: 'NY' },
  ]}
  onValueChange={setState}
  value={state}
/>;

Common Mistakes

• Prefer Select over SelectNative for new work. SelectNative predates Select and is kept mainly for backward compatibility — native picker instability (crashes and a dropdown-not-opening issue after RN upgrades) is exactly what drove the team to build a custom-styled Select as the default going forward.
• The prop is data (an array of { label, value }), not options or items — a common assumption coming from other picker libraries.
• iOS and Android render genuinely different pickers here: iOS shows the native wheel/action-sheet picker, while Android renders a custom-styled dropdown rather than the OS's native spinner (useNativeAndroidPickerStyle is explicitly set to false). Don't assume identical UX or screenshots across platforms.
• If selected values come back as literal ? placeholders, check the shape of data — this has been a real reported issue traced to how the option list was structured, not a bug in the component itself.