react-native-keyboard-controller
react-native-keyboard-controller copied to clipboard
KeyboardToolbar unusable when used inside RN Modal
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:
- Create a new RN project
- Install react-native-keyboard-controller
- Wrap your app with KeyboardProvider
- On one of the screen use Modal to show form fields and inject KeyboardToolbar
- 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
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.