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
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),
},