haya-select

Just another select component for React Native + Web.

API documentation

• Documentation for the latest stable release
• Documentation for the main branch

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npm install haya-select

Configure for Android

Configure for iOS

Run npx pod-install after installing the npm package.

Usage

import {View} from "react-native"
import React from "react"
import HayaSelect from "haya-select"

export default function ExampleSelect() {
  return (
    <View>
      <HayaSelect
        options={[
          {value: 1, text: "Option 1"},
          {value: 2, text: "Option 2"}
        ]}
      />
    </View>
  )
}

Async options with pagination

When options is a callback, it can return either an array of options or an object with pagination metadata.

The callback receives the current searchValue, page, and optional values when loading default selections.

<HayaSelect
  search
  options={async ({searchValue, page}) => {
    const response = await fetch(`/api/options?query=${searchValue}&page=${page}`)
    const data = await response.json()

    return {
      options: data.options,
      totalCount: data.totalCount,
      page: data.page,
      pageSize: data.pageSize
    }
  }}
/>

If totalCount and page are provided, the options list shows pagination controls with previous/next buttons, a page range around the current page, and a "Page X of Y" label that can be clicked to enter a page number manually.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.