diff --git a/README.md b/README.md index ddf4b05..fb573a9 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,8 @@ const countries = ["Egypt", "Canada", "Australia", "Ireland"] - [`showsVerticalScrollIndicator`](#showsVerticalScrollIndicator) +- [`YDropdownOffset`](#YDropdownOffset) + - [`rowStyle`](#rowStyle) - [`rowTextStyle`](#rowTextStyle) @@ -361,6 +363,16 @@ When true, shows a vertical scroll indicator. --- +### YDropdownOffset + +Offset between button and dropdown view on Y axis + +| Type | Required | +| ------- | -------- | +| integer | no | + +--- + ### rowStyle style object for row diff --git a/src/SelectDropdown.js b/src/SelectDropdown.js index 18f66b0..0c6cdaf 100644 --- a/src/SelectDropdown.js +++ b/src/SelectDropdown.js @@ -38,6 +38,7 @@ const SelectDropdown = ( dropdownStyle, dropdownOverlayColor /* string */, showsVerticalScrollIndicator, + YDropdownOffset /* integer */, ///////////////////////////// rowStyle /* style object for row */, rowTextStyle /* style object for row text */, @@ -77,7 +78,7 @@ const SelectDropdown = ( getItemLayout, dropdownWindowStyle, onRequestClose, - } = useLayoutDropdown(data, dropdownStyle, rowStyle, search); + } = useLayoutDropdown(data, dropdownStyle, rowStyle, search, YDropdownOffset); useImperativeHandle(ref, () => ({ reset: () => { reset(); diff --git a/src/hooks/useLayoutDropdown.js b/src/hooks/useLayoutDropdown.js index 6b990b9..c6c7517 100644 --- a/src/hooks/useLayoutDropdown.js +++ b/src/hooks/useLayoutDropdown.js @@ -4,7 +4,7 @@ import {calculateDropdownHeight} from '../helpers/calculateDropdownHeight'; import {useKeyboardRemainingScreenHeight} from './useKeyboardRemainingScreenHeight'; const {height} = Dimensions.get('window'); -export const useLayoutDropdown = (data, dropdownStyle, rowStyle, search) => { +export const useLayoutDropdown = (data, dropdownStyle, rowStyle, search, YDropdownOffset) => { const [isVisible, setIsVisible] = useState(false); // dropdown visible ? const [buttonLayout, setButtonLayout] = useState(null); const [dropdownPX, setDropdownPX] = useState(0); // position x @@ -40,9 +40,9 @@ export const useLayoutDropdown = (data, dropdownStyle, rowStyle, search) => { const dropdownWindowStyle = useMemo(() => { const top = - remainigHeightAvoidKeyboard < dropdownPY + safeDropdownViewUnderKeyboard + remainigHeightAvoidKeyboard < dropdownPY + safeDropdownViewUnderKeyboard + YDropdownOffset ? remainigHeightAvoidKeyboard - safeDropdownViewUnderKeyboard - : dropdownPY; + : dropdownPY + YDropdownOffset; return { ...{ borderTopWidth: 0,