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

Animated keyboard values do not update if the focussed TextInput exists within a modal

Open Braden1996 opened this issue 4 months ago • 14 comments

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:

  1. Create a TextInput element inside of a React Native Modal.
  2. 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

Braden1996 avatar Feb 25 '24 17:02 Braden1996