KeyboardStickyView not moving with keyboard within modal

[spaansba]

Thanks again for your hard work on this amazing project!

Describe the bug When using the KeyboardStickyView or KeyboardToolbar it doesnt move with the keyboard on scrolling the modal up/down

Code snippet

const SettingModalWrapper = ({
  label,
  isModalVisible,
  setIsModalVisible,
  children,
}: SettingModalWrapperProps) => {
  const form = useForm({
    onSubmit: async ({ value }) => {
      console.log(value)
    },
    defaultValues: {
      email: "",
    },
  })

  return (
    <Modal
      animationType="slide"
      presentationStyle="pageSheet"
      visible={isModalVisible}
      onRequestClose={() => setIsModalVisible(false)}
    >
      <View className="h-full bg-primary-200">
        <KeyboardAvoidingView className="px-5 py-5 flex-1">
          <form.Field
            name="email"
            children={(field) => (
              <View className="">
                <TextInput
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChangeText={field.handleChange}
                  placeholder="[email protected]"
                  spellCheck={true}
                  textContentType="emailAddress"
                />
              </View>
            )}
          />
        </KeyboardAvoidingView>
        <KeyboardToolbar />
      </View>
    </Modal>
  )
}

Repo for reproducing https://github.com/spaansba/Toaster

To Reproduce

1. Add a modal to your app
2. Add a textinput
3. Click the textinput and move the modal

Expected behavior The toolbar should move with the keyboard when moving the modal up/down

Screenshots

https://github.com/user-attachments/assets/732e80c2-c00d-4ec5-8d9b-12602a3a5695

Smartphone (please complete the following information):

• Device: iPhone 13
• OS: IOS 18.3.1
• RN version: 0.76.7
• expo version: 52.0.35
• RN architecture: new
• Library version: 1.16.7

[kirillzyusko]

Good finding @spaansba

At the moment I don't know the solution (maybe you have something in your mind?). One potential fix is to disable gesture dismissal if keyboard is visible (but it's not a real fix) 😔

@IvanIhnatsiuk maybe you have any ideas?

[spaansba]

I don't have a solution yet, but I tried some other packages that have similar 'above the keyboard toolbars' (like 10play/tentap-editor and react-native-keyboard-accessory) and all of them run in the exact same behaviour.

[kirillzyusko]

@spaansba did you try to use InputAccessoryView? It will not work on Android, but at least it should be working on iOS 🤷‍♂

[spaansba]

@kirillzyusko I tried it out with the InputAccessoryView and that does actually work correctly (iOS only ofcourse). Maybe we can learn from how RN implements it.

[kirillzyusko]

Maybe we can learn from how RN implements it.

I can also expose InputAccessoryView on iOS - it's not a big deal. The problem here is that InputAccessoryView is available only on iOS, and the goal of this library was providing cross-platform behavior.

One possible way I'm exploring right now is wrapping KeyboardToolbar into OverKeyboardView, so that it will live in its own container. It works, but OverKeyboardView is not allowing to pass touches through that view - need to investigate that option (at the moment OverKeyboardView will simply block all interactions with the screen beneath it).