dropdown position

[YoelEigner]

I'm trying to center my dropdown but it always positions itself under the button my dropdown is below and as you can see i do specify the dropdownStyle but it's still not screen centered, i want it to always be in the center no matter where the button is

<SelectDropdown
        ref={dropdownRef}
        data={options}
        defaultValueByIndex={defaultValue}
        onSelect={(selectedItem, index) => {
          handleChange(selectedItem, index)
        }}
        dropdownStyle={{ position: 'absolute', alignSelf: 'center', justifyContent: 'center', flex: 1 }}
        selectedRowTextStyle={{ fontFamily: 'Rubik-Bold' }}
        buttonStyle={{ backgroundColor: 'transparent', }}
        dropdownIconPosition={'left'}
        renderCustomizedButtonChild={(selectedItem, index) => {
          return (
            <View style={Styling.customDropDownBtnView}>
              <Text
                onLayout={handleTextLayout}
                style={Styling.link}
                numberOfLines={1}
              >
                {selectedItem ? selectedItem.title : 'Choose...'}
              </Text>
              {
                <MaterialCommunityIcons
                  style={{ marginTop: 5 }}
                  name="arrow-down"
                  color={'#3994FF'}
                  size={18}
                />
              }
            </View>
          )
        }}
        buttonTextAfterSelection={(selectedItem, index) => {
          return selectedItem
        }}
        rowTextForSelection={(item, index) => {
          return item.title
        }}
      />

[MrWarzo]

Same problem here

[Withalion]

I had a similar issue where I wanted my dropdown to change position to top of screen, because on the bottom of the dropdown I had a TextInput row, which was always hidden behind keyboard if user tried to write something.

Unfortunately after checking the code of the SelectDropdown dropdownStyle is applied before calculated absolute position, so any changes to position won't take effect. (useLayoutDropdown.js lines 47-57)

[AdelRedaa97]

Currently, the dropdown appears only under the button you can update it and patch the file

update to v 4.0.0 find this file react-native-select-dropdown/src/hooks/useLayoutDropdown.js after line 71 add your position, it should be at the end of the return {}