Massive/Select.tsx

import React, { useCallback, useMemo, useState } from "react";
import { View } from "react-native";
import { Button, Menu, Subheading } from "react-native-paper";
import { ITEM_PADDING } from "./constants";

export interface Item {
  value: string;
  label: string;
  color?: string;
}

function Select({
  value,
  onChange,
  items,
  label,
}: {
  value: string;
  onChange: (value: string) => void;
  items: Item[];
  label?: string;
}) {
  const [show, setShow] = useState(false);

  const selected = useMemo(
    () => items.find((item) => item.value === value) || items[0],
    [items, value]
  );

  const handlePress = useCallback(
    (newValue: string) => {
      onChange(newValue);
      setShow(false);
    },
    [onChange]
  );

  return (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        paddingLeft: ITEM_PADDING,
      }}
    >
      {label && <Subheading style={{ width: 100 }}>{label}</Subheading>}
      <Menu
        visible={show}
        onDismiss={() => setShow(false)}
        anchor={
          <Button
            onPress={() => setShow(true)}
            style={{
              alignSelf: "flex-start",
            }}
          >
            {selected?.label}
          </Button>
        }
      >
        {items.map((item) => (
          <Menu.Item
            titleStyle={{ color: item.color }}
            key={item.value}
            title={item.label}
            onPress={() => handlePress(item.value)}
          />
        ))}
      </Menu>
    </View>
  );
}

export default React.memo(Select);