aurangs7
commented
5 months ago same here, UI is fine on iOS
tried:
statusBarTranslucent={true}
and
statusBarIsTranslucent={true}
but still the issue
for now I managed it with styling:
containerStyle={styles.containerStyle}
containerStyle: { marginTop: Platform.OS === 'ios' ? 0 : -20 },
Issue: The Android dropdown is rendering with a noticeable gap between the field and the dropdown itself.
Analysis:
Configurations:
"react": "18.2.0", "react-native": "0.72.6", "react-native-element-dropdown": "^2.10.1",
new architecture is enabled for both android and ios
android device: pixel 6/pixel 3 iOS: iPhone 12
Code config:
index.tsx
<Dropdown ref={dropDownRef} data={data} renderRightIcon={renderRightIcon} labelField={labelF} valueField={valueF} value={value} disable={disable} onChange={handleSelection} placeholder={placeholder} containerStyle={styles.InnerList} itemTextStyle={[styles.InnerListText, customInnerTextStyle]} itemContainerStyle={styles.ListWrap} selectedTextStyle={styles.selectedTextStyle} placeholderStyle={styles.placeHolderStyle} onFocus={handleDismiss} onBlur={onBlur} keyboardAvoiding={keyboardAvoiding} search={search} inputSearchStyle={styles.dropDownSearch} searchPlaceholder={strings.SEARCH} renderInputSearch={renderInputSearch ?? null} renderItem={renderItem ?? null} />styles.ts
export const styles = StyleSheet.create({ placeholder: { ...commonStyles.fontSize9, color: colors.greyText, marginHorizontal: 15, }, InnerList: { backgroundColor: '#fff', padding: 0, borderRadius: 10, boxShadow: '0px 5px 10px rgba(0, 0, 0, 0.1)', borderWidth: 0, overflow: 'hidden', borderRightWidth: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1, borderColor: colors.activeColor, }, InnerListText: { ...commonStyles.fontSize13, padding: 0, color: '#292b38', margin: 0, }, ListWrap: { padding: 0, borderColor: colors.activeColor, }, dropDownSearch: { ...commonStyles.fontSize13, borderRadius: 10, borderColor: colors.activeColor, }, dropIcon: {marginHorizontal: 15}, selectedTextStyle: {...commonStyles.fontSize13, marginHorizontal: 15}, placeHolderStyle: {...commonStyles.fontSize13, marginHorizontal: 15}, errorView: {marginLeft: 10, marginBottom: 5}, });