react-native-keyboard-controller
react-native-keyboard-controller copied to clipboard
KeyboardStickyView not moving with keyboard within modal
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
- Add a modal to your app
- Add a textinput
- 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