Select component and Toast in web.

[nikitimi]

I'm using Expo and the same tailwind.config.js in the main branch.

Other configurations

babel.config.js:

    module.exports = function (api) {
    api.cache(true);
    return {
        presets: [
               ["babel-preset-expo", { jsxImportSource: "nativewind" }],
               "nativewind/babel",
        ],
    };

metro.config.js:

    const { getDefaultConfig } = require("expo/metro-config");
    const { withNativeWind } = require("nativewind/metro");

    const config = getDefaultConfig(__dirname);

    module.exports = withNativeWind(config, { input: "./global.css" });

Select

• When the options are long enough for the screen to render, I cannot scroll down to look at the other options.

Toast

• The toast styles are not being rendered properly.

Here is my sample code for both component:

dictionary.ts:

    export const alphabet = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    ] as const;

    export type Letter = (typeof alphabet)[number];

App.tsx:

import {type Letter, alphabet} from "dictionary";
import { useState } from "react";
import { Select } from "@/components/Select";
import { ToastProvider, useToast } from "@/components/Toast";

export default function HomeScreen() {
  return (
    <ToastProvider position="top">
        <SelectContainer />
    </ToastProvider>
  )
}

function SelectContainer() {
  const [selectedLetter, setSelectedLetter] = useState<Letter | undefined>();
  const { toast } = useToast();

  return (
    <Select
    selectClasses="text-white border-white border-2"
    labelClasses="text-white"
    labelKey={"label"}
    onSelect={(value) => {
        toast(`Selected letter ${value}`, "success");
        setSelectedLetter(value as Letter);
    }}
    selectedValue={
        selectedLetter === undefined ? undefined : (selectedLetter as string)
    }
    options={alphabet.map((letter) => ({
        label: letter.toLocaleUpperCase(),
        value: letter,
    }))}
    placeholder="Select a letter"
    valueKey={"value"}
    />
  );
}