How to style selectText box in MultiSelect component of react-native-multiple-select: React Native?

38 Views Asked by At

I have created a multi select input field in react native project using MultiSelect component of react-native-multiple-select package, I have defined the height of the input and I wanted some border and small fonts, but I'm getting some unnecessary white background on the input field which overlaps on the border.

HOW TO REMOVE THIS BACKGROUND to look like its inside the bordered input??

Here is the ss

enter image description here

Here is the code where I design my disease field:-

<MultiSelect
            items={diseaseList}
            uniqueKey="name"
            onSelectedItemsChange={onSelectedItemsChange}
            selectedItems={selectedItems}
            searchInputPlaceholderText="Search Items..."
            onChangeInput={(text) => console.log(text)}
            tagRemoveIconColor="#CCC"
            tagBorderColor={Colors.grayColor.gray600}
            tagTextColor={Colors.grayColor.gray700}
            selectedItemTextColor="#CCC"
            selectedItemIconColor="#CCC"
            itemTextColor="#000"
            displayKey="name"
            selectText={''}
            submitButtonColor={Colors.primaryColor.primary400}
            submitButtonText="Submit"
            searchInputStyle={{
              fontSize: moderateScale(15),
              paddingVertical: verticalScale(6),
            }}
            styleInputGroup={{
              borderRadius: moderateScale(4),
              borderColor: Colors.grayColor.gray600,
              borderWidth: 2,
            }}
            styleDropdownMenu={
              !diseaseList.length === 0
                ? styles.multiSelect
                : styles.multiSelectEmpty
            }
            styleRowList={{
              fontSize: moderateScale(15),
            }}
            styleTextDropdown={{
              fontSize: moderateScale(15),
              height: verticalScale(20),
            }}
            styleTextDropdownSelected={{
              height: verticalScale(23),
              fontSize: moderateScale(15),
            }}
          />
        </View>

Styling code:-

multiSelect: {
    backgroundColor: "#fff",
  },
  multiSelectEmpty: {
    borderRadius: moderateScale(4),
    borderColor: Colors.grayColor.gray600,
    borderWidth: 2,
    paddingHorizontal: horizontalScale(10),
    paddingVertical: verticalScale(1),
    backgroundColor: "#fff",
    height: verticalScale(37),
  },
0

There are 0 best solutions below