Pointotech React Native Combobox

Install

Yarn installation

1yarn add @pointotech/react-native-combobox@latest

NPM installation

1npm install @pointotech/react-native-combobox@latest

Create JavaScript wrapper for the native component

Put this code in a Combobox.tsx file in your project:

1import { ComboboxDataRow } from "@pointotech/react-native-combobox/ComboboxDataRow"
2import { ComboboxProps } from "@pointotech/react-native-combobox/ComboboxProps"
3import React from "react"
4import {
5  requireNativeComponent,
6  NativeModules,
7  HostComponent,
8  Platform,
9} from "react-native"
10
11const ComboboxImplementation = requireNativeComponent(
12  Platform.OS === "android" ? "ComboboxImplementationAndroid" : "Combobox"
13) as HostComponent<ComboboxProps>
14
15const prepareSelectedItem = (
16  selectedItem: string | ComboboxDataRow | null
17): { text: string; isAvailable?: boolean } | null => {
18  if (selectedItem === null) {
19    return null
20  } else {
21    if (typeof selectedItem === "string") {
22      return {
23        text: selectedItem,
24      }
25    } else if (typeof selectedItem === "object") {
26      if (selectedItem.text && typeof selectedItem.text === "string") {
27        return {
28          text: selectedItem.text,
29          isAvailable: selectedItem.hasOwnProperty("isAvailable")
30            ? !!selectedItem.isAvailable
31            : undefined,
32        }
33      } else {
34        throw new Error(`Selected item must have a "text" property.`)
35      }
36    } else {
37      throw new Error(
38        "Selected item must be an object or a string. Value received: " +
39          selectedItem
40      )
41    }
42  }
43}
44
45export function Combobox(props: ComboboxProps) {
46  const { selectedItem, ...propsWithoutSelectedItem } = props
47  return (
48    <ComboboxImplementation
49      selectedItem={prepareSelectedItem(selectedItem)}
50      {...propsWithoutSelectedItem}
51    />
52  )
53}
54
55export const ComboboxManager = NativeModules.Combobox

Use

Import the Combobox component from your Combobox.tsx file, and use it in your app's UI:

1import { Combobox } from "./src/Combobox"
2
3export const App = () => {
4  return (
5    <Combobox
6      style={{ height: 100 }}
7      items={[
8        "foo",
9        "bar",
10        "qux",
11        { text: "hello world", isAvailable: true },
12        "narf",
13      ]}
14      selectedItem="hello world"
15      placeholder="Pick a nonsense, please! Or don't."
16      onSelectedItemChanged={(event) => {
17        if (!event) {
18          throw new Error("onSelectedItemChanged event is null.")
19        }
20        if (!(event instanceof Object)) {
21          throw new Error("onSelectedItemChanged event is not an object.")
22        }
23        if (event.hasOwnProperty("nativeEvent")) {
24          const nativeEvent = (event as { nativeEvent: unknown }).nativeEvent
25
26          if (nativeEvent.hasOwnProperty("selectedItem")) {
27            const selectedItem = (nativeEvent as { selectedItem: unknown })
28              .selectedItem
29
30            if (selectedItem && typeof selectedItem === "object") {
31              if (selectedItem.hasOwnProperty("text")) {
32                console.log(
33                  "onSelectedItemChanged text " +
34                    (selectedItem as { text: unknown }).text
35                )
36              } else {
37                throw new Error("onSelectedItemChanged text not defined")
38              }
39
40              if (selectedItem.hasOwnProperty("isAvailable")) {
41                console.log(
42                  "onSelectedItemChanged isAvailable " +
43                    (selectedItem as { isAvailable: unknown }).isAvailable
44                )
45              } else {
46                console.log("onSelectedItemChanged isAvailable not defined")
47              }
48            }
49          } else {
50            throw new Error(
51              'onSelectedItemChanged native event has no "selectedItem" property.'
52            )
53          }
54        } else {
55          throw new Error(
56            'onSelectedItemChanged event has no "nativeEvent" property.'
57          )
58        }
59      }}
60    />
61  )
62}