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

KeyboardToolbar unusable when used inside RN Modal

Open aaamoshd opened this issue 1 year ago • 14 comments

Describe the bug When KeyboardToolbar component is used inside a react-native modal the next, prev and done buttons become un-clickable and when clicked just closes the keyboard. No matter of z-index in the button props seem to be doing the trick.

Code snippet

<Modal
  presentationStyle="formSheet"
  onRequestClose={onClose}
  visible={open}
  transparent={false}
>
  <KeyboardAvoidingView
      behavior="padding"
      keyboardVerticalOffset={100}
      style={{ flex: 1, paddingHorizontal: 16 }}
  >
      <Input
          required
          onChangeText={(val) =>
              setValue({
                  ...value,
                  data: val,
              })
          }
          value={value.data}
      />
      <Button color="tertiary" onPress={handleSubmit}>
          <Typography
              color="primary"
              weight="600"
              align="center"
              style={{
                  textTransform: 'uppercase',
                  width: '100%',
              }}
          >
              {localize.translate('add')}
          </Typography>
      </Button>
   </KeyboardAvoidingView>
    <KeyboardToolbar
        button={(props) => (
            <Button {...props} style={{ zIndex: 1000 }} />
        )}
    />
</Modal>

Repo for reproducing Sorry since this is an internal project, I am unable to provide you with the reproducing repo. However, if you install the package, wrap app with <KeyboardProvider> and then open a modal with the component from this library along with KeyboardToolbar the navigation buttons become unusable.

To Reproduce Steps to reproduce the behavior:

  1. Create a new RN project
  2. Install react-native-keyboard-controller
  3. Wrap your app with KeyboardProvider
  4. On one of the screen use Modal to show form fields and inject KeyboardToolbar
  5. Try clicking on the toolbar next, prev and done button.

Expected behavior To be able to click on the toolbar to be able to navigate form fields.

Screenshots MyMovie1-ezgif com-video-to-gif-converter

Smartphone (please complete the following information):

  • Desktop OS: [MacOS 14.4.1]
  • Device: [All Device]
  • OS: [ios ~17, android ~ 14]
  • RN version: [e.g. 0.74.0]
  • RN architecture: [fabric]
  • JS engine: [Hermes]
  • Library version: [1.13.4]

Additional context The library is super awesome. It works on all the other screens apart from when being used inside a Modal.

aaamoshd avatar Sep 18 '24 14:09 aaamoshd