iOS Keyboard glitches on TextInput focus (React-Native & Expo)

Question

I've an issue regarding an app i'm developing on React Native (w/Expo).

I'm REALLY new to React Native. I don't know if this is an issue of libraries or an issue gathered by my low knowledge.

In my app there's a button to open a modal in which you can set different details. One of this is the ability to search for a Location (in a nested modal).

In the second modal there's a custom InputField component (it's basically a TextInput from RN) inside a custom "HeaderComponent" of my modal.

(The HeaderComponent is simply outside a ScrollView that I added inside a custom ModalComponent)

On Android it works as expected, but when I open the second modal on iOS (my physical device), the keyboard decides to go freaking crazy producing weird jumps/glitches. I'm not sure why this happens but when I move my custom InputField inside the ScrollView along with the "children" components of my custom Modal, the keyboard works well.

Here's a recording of what happens on Android (and the expected result).

Here's a recording of what happens on iOS when I have InputField inside HeaderComponent.

Here's a recording of what happens on iOS when I have InputField outside HeaderComponent (works well).

Here you can file the files. It's now a working example because it would be too wild and complicated but if needed I can share the full github repo.

https://snack.expo.dev/@plungarini/636281

Project components tree for the issue:

> App.js (Ignore this)
  > Modal.js
  > AddLogScreen.js (First Modal)
    > DiveLocation.js
      > Modal.js
      > SearchLocation.js (Second Modal)
        > InputField.js

You will find all the files inside the Snack in the "Files" folder.

PS: I'd prefer to not have the InputField outside HeaderComponent because it shouldn't scroll. A quick workaround could be to have the ScrollView outside the custom ModalComponent but it would be quite annoying because all the other components that uses ModalComponent would need to have a repetition of ScrollView.

EDIT 1

I'm trying everything to localize the issue. What I think is that it may be in the implementation of a parent component. Inside Modal.js:87 I tried to move {HeaderComponent && <HeaderComponent />} on line 94 (inside ScrollView). I did this because initially I tought it was an issue caused by the wrapper (because it was working as expected when in SearchLocation.js I moved the InputField from the Header Component Function to the children of Modal). That doesn't seems the case because I still have the same problem. That's why I think that the problem may be importing HeaderComponent as a param. But I don't personally know any other option.