Skip to content

Commit 84934b9

Browse files
authored
Issue #91 Add header offset (#92)
* Remove .DS_Store * Add optional height offset for header
1 parent 709a96a commit 84934b9

File tree

4 files changed

+19
-3
lines changed

4 files changed

+19
-3
lines changed

.DS_Store

-6 KB
Binary file not shown.

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
##
44
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
55

6+
.DS_Store
7+
68
# User-specific files
79
*.rsuser
810
*.suo

README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,20 @@ Wrap your root component in `AutocompleteDropdownContextProvider` from `react-na
7979
</AutocompleteDropdownContextProvider>
8080
```
8181

82+
If you have a header component, you can pass an offset. For example with react navigation
83+
84+
```js
85+
//...
86+
import { useHeaderHeight } from '@react-navigation/elements';
87+
//...
88+
const headerHeight = useHeaderHeight();
89+
//...
90+
91+
<AutocompleteDropdownContextProvider headerOffset={headerHeight} >
92+
<AppRootOrWhatever/>
93+
</AutocompleteDropdownContextProvider>
94+
```
95+
8296
import the package
8397

8498
```js

src/AutocompleteDropdownContext.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const AutocompleteDropdownContext = React.createContext<IAutocompleteDrop
2020
activeInputRef: undefined
2121
})
2222

23-
export const AutocompleteDropdownContextProvider: FC<any> = ({ children }) => {
23+
export const AutocompleteDropdownContextProvider: FC<any> = ({ headerOffset = 0, children }) => {
2424
const [content, setContent] = useState<IAutocompleteDropdownContext['content']>()
2525
const [direction, setDirection] = useState<IAutocompleteDropdownContext['direction']>(undefined)
2626
const [show, setShow] = useState(false)
@@ -42,14 +42,14 @@ export const AutocompleteDropdownContextProvider: FC<any> = ({ children }) => {
4242

4343
if (dropdownHeight && direction === 'up') {
4444
setContentStyles({
45-
top: inputMeasurements.y - dropdownHeight - 10,
45+
top: inputMeasurements.y - dropdownHeight - 10 - headerOffset,
4646
left: inputMeasurements.x,
4747
width: inputMeasurements.width
4848
})
4949
setOpacity(1)
5050
} else if (direction === 'down') {
5151
setContentStyles({
52-
top: inputMeasurements.y + inputMeasurements.height + 5,
52+
top: inputMeasurements.y + inputMeasurements.height + 5 - headerOffset,
5353
left: inputMeasurements.x,
5454
width: inputMeasurements.width
5555
})

0 commit comments

Comments
 (0)