React Native Keyboard Dismiss has a Delay with grey area

user_3517546 0
Viewed 316

In the React Native app I have implemented dismiss keyboard. However when the keyboard is dismissed from scroll view, there is a delay and a grey area will show up before the keyboard disappears. How can I avoid that from happening?

Dismiss Keyboard Delay

react-native android javascript ios
2 Answers

The grey area looks like the tableViewCell being selected. To change the selectionStyle in swift it would be: cell.selectionStyle = .blue or .none The delay is a little more difficult. I would make sure I am running on a device to test it and make sure the function that dismisses the keyboard is being called from the main thread.

user_42006350

I was dealing with a similar issue, ended up setting height on my wrapping view when the keyboardWillHide event fires.

Most basic code looks like:

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", (keyboardEvent) => {
      const screenHeight = Dimensions.get("window").height;
      const keyboardHeight = keyboardEvent.endCoordinates.height;
      setContainerStyle({
        height: screenHeight - keyboardHeight,
      });
    });
    const hideSubscription = Keyboard.addListener("keyboardWillHide", () => {
      setContainerStyle({
        height: "100%",
      });
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

Hopefully that helps

user_6868710
Related