react-native-keyboard-controller
react-native-keyboard-controller copied to clipboard
Animated keyboard values do not update if the focussed TextInput exists within a modal
Describe the bug Animated keyboard values do not update if the focussed TextInput exists within a modal.
Code snippet Repo for reproducing Here is a test case I've been using which plugs into your example app:
import React, { useState } from "react";
import { Button, Modal, StyleSheet, View } from "react-native";
import {
GestureHandlerRootView,
TouchableWithoutFeedback,
} from "react-native-gesture-handler";
import { KeyboardProvider } from "react-native-keyboard-controller";
import TextInput from "../../../components/TextInput";
import KeyboardAnimation from "../KeyboardAnimation";
export default function ModalExample() {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container}>
<Button
title={"Show Modal"}
onPress={() => setModalVisible(true)}
testID="toggle_button"
/>
<View style={styles.animationContainer}>
<KeyboardAnimation />
</View>
<Modal
transparent
visible={modalVisible}
onDismiss={() => setModalVisible(false)}
onRequestClose={() => setModalVisible(false)}
>
<GestureHandlerRootView style={styles.modalContainer}>
<TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
<TextInput
testID="modal_example_text_input"
style={styles.textInput}
/>
</TouchableWithoutFeedback>
</GestureHandlerRootView>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "stretch",
},
modalContainer: {
flex: 1,
backgroundColor: "rgba(0,0,0,0.2)",
justifyContent: "center",
alignItems: "center",
},
animationContainer: {
flex: 1,
},
textInput: {
width: 200,
marginTop: 50,
height: 50,
backgroundColor: "yellow",
},
});
To Reproduce Steps to reproduce the behavior:
- Create a
TextInput
element inside of a React Native Modal. - See that any keyboard height observers no longer seem to receive updates.
Expected behavior RN Keyboard Controller's utilities should continue to work for TextInputs inside Modals.
Screenshots
https://github.com/kirillzyusko/react-native-keyboard-controller/assets/5165963/26398588-c504-4f98-a1bc-985ae1f9b11e