react-nativenative-base

Native base Select component open my keyboard


I am using native-base Select component and when I try to open Select items it opens keyboard instead. On ios works perfect, i can hide dropdownicon and click anywhere on Select field and it will open Select items, but on android i can open only when i press on dropdownicon. I'm using native-base 3.4.28, previously use 3.2.1 and it works on both ios and android, after the upgrade it doesnt.

<Select
          flex={1}
          // @ts-ignore
          dropdownIcon={() => null}
          selectedValue={props.value}
          placeholder="Gender"
          _selectedItem={{
            bg: 'primary.100',
            endIcon: <CheckIcon size="5" />,
          }}
          onValueChange={props.handleChange}
          fontWeight={props.value ? 600 : 400}
          fontSize={'14px'}
          {...props.selectProps}
        >
          <Select.Item label="Female" value={Gender.FEMALE} />
          <Select.Item label="Male" value={Gender.MALE} />
          <Select.Item label="Non binary" value={Gender.NON_BINARY} />
          <Select.Item
            label="Not listed above"
            value={Gender.NOT_LISTED_ABOVE}
          />
          <Select.Item
            label="Prefer not to say"
            value={Gender.PREFER_NOT_TO_SAY}
          />
        </Select>

I tried to dismiss the Keyboard within onOpen prop but isn't working


Solution

  • To anyone who is facing the same issue and don't want to modify that much, just add the isReadOnly flag to the <FormControl /> :

    <FormControl isReadOnly>
            <FormControl.Label>{label}</FormControl.Label>
            <Controller...
        ```