Small subset of users unable to open <Select />

[MarcusSanchez]

I have an application that uses React Native Reusables, and for most users, the experience is good, however a very small subset of users are unable to open any Select drop down within the app.

I can't actually replicate the problem on my end, as it seems very rare and device specific.

Is there any information regarding this phenomenon? Has anyone dealt with similar problems or any common solutions that should resolve something like this.

Like I said, for the most part, it typically does work, only on a select few users' devices does it not.

Here is an example of a select within my app.

import { useTranslation } from "react-i18next";
import React from "react";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";
import { Option } from "@rn-primitives/select";
import AsyncStorage from "@react-native-async-storage/async-storage";

function LanguageSelect() {
  const { t, i18n } = useTranslation();

  const languages = [
    { label: "English", value: "en-US" },
    { label: "Español", value: "es-US" },
    { label: "Français", value: "fr-CA" },
    { label: "Kreyòl Ayisyen", value: "ht-HT" },
    { label: "Português", value: "pt-BR" }
  ];

  const onValueChange = (o: Option) => {
    if (!o) return;

    i18n.changeLanguage(o.value);
    AsyncStorage.setItem("language", o.value);
  };

  const defaultValue = languages.find(l => l.value === i18n.language);

  return (
    <Select defaultValue={defaultValue} onValueChange={onValueChange} className="h-[2.75rem]">
      <SelectTrigger className="w-[150px]">
        <SelectValue
          className="text-foreground text-sm native:text-lg"
          placeholder={t("settings.selectALanguage")}
        />
      </SelectTrigger>
      <SelectContent className="w-[250px]">
        <SelectGroup>
          <SelectLabel>{t("settings.languages")}</SelectLabel>
          {languages.map(language => (
            <SelectItem
              key={language.value}
              label={language.label}
              value={language.value}
            />
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

[Jerome-Jumah]

For my case the select and drop down component are not working when I use them in alert dialogue and dialogue component. That is the pattern I have identified. Working fine on screens.

[a0m0rajab]

Do you know what platform that users are using? If it's IOS then you need to update your code!

[a0m0rajab]

Here is a working example for IOS:

https://github.com/mrzachnugent/react-native-reusables/pull/402/files

[MarcusSanchez]

Here is a working example for IOS:

https://github.com/mrzachnugent/react-native-reusables/pull/402/files

Hello a0m0rajab,

Are you sure that this will fix it?

I'm pretty sure the users experiencing problems are indeed iOS users, I will check with them tomorrow.

What do exactly do I need to update? A library? -- Or to essentially just generate the Select component again.

[a0m0rajab]

@MarcusSanchez yeah, I have an IOS device myself and faced the same issue, for IOS the select might work but not show above everything for that reason you will need to use a portal/fullwidth screen here is the parts you need to change:

   const insets = useSafeAreaInsets();
    const contentInsets = {
        top: insets.top,
        bottom: insets.bottom,
        left: 12,
        right: 12,
    };

                <SelectContent
                    insets={contentInsets}
                    className='w-[250px]'
                    portalHost={Platform.select({ ios: IOS_PORTAL_HOST_NAME })}
                    sideOffset={Platform.select({ ios: 16 })}
                >

  {Platform.OS === 'ios' && (
                <FullWindowOverlay>
                    <PortalHost name={IOS_PORTAL_HOST_NAME} />
                </FullWindowOverlay>
            )}