react-native-keyboard-controller icon indicating copy to clipboard operation
react-native-keyboard-controller copied to clipboard

KeyboardStickyView not moving with keyboard within modal

Open spaansba opened this issue 10 months ago • 5 comments

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

spaansba avatar Mar 18 '25 08:03 spaansba