Keyboard.removeListener is not a function

[mustafauyysl]

Hello I started getting this error after the last update of react native because the removeListener function was removed in the last update.

[horo42]

in MessageContainer.js constructor

this.attachKeyboardListeners = () => {
    const { invertibleScrollViewProps: invertibleProps } = this.props;
    if (invertibleProps) {
-        Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
-        Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
-        Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
-        Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
+        this.willShowSub = Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
+        this.didShowSub = Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
+        this.willHideSub = Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
+        this.didHideSub = Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
    }
};
this.detachKeyboardListeners = () => {
    const { invertibleScrollViewProps: invertibleProps } = this.props;
-    Keyboard.removeListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
-    Keyboard.removeListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
-    Keyboard.removeListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
-    Keyboard.removeListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
+    this.willShowSub?.remove();
+    this.didShowSub?.remove();
+    this.willHideSub?.remove();
+    this.didHideSub?.remove();
};

you can apply this fix with https://github.com/ds300/patch-package until the maintainers fix this

[kundankarna1994]

I tried the above code and its throwing above error

[horo42]

I updated my answer, adding optional chaining operators to the remove() method calls. That should fix your issue.

[gogroup-official]

Changer to

[Faiaz-Rahman]

This helped a lot! You saved my day! 💚💚❤❤💜💜

[marister]

Anyone knows whats the status of this?
Is there a PR open for this?
can someone merge it please? 😄 👯 💘

[adhip94]

@xcarpentier Is it possible to do a quick release with a fix as this issue is affecting all users on RN 0.65 and above?

[mrcustodio]

Yep, I'm on the same boat... Every time having to manually change the listener to remove the errors...

[morphytron]

Receiving same issue on latest release.

[mrshahzeb7]

facing this issue when logout from chat screen (after upgrading all libraries)

[intechsol143]

Changer to

Thank you very much

[anwersolangi]

@horo42 after updating the MessageContainer file, i get the error node_modules\react-native-gifted-chat\lib\messagecontainer.js: cannot find module 'metro-react-native-babel-preset' I tried to update the package.json file and also tried to add metro-react-natiev-babel-preset in the package and comment out the transform in package json, cleared the npm cache, clean android project but nothing helped....

[PointlessSpike]

I've just tried Gifted Chat and come across this issue. Simplest possible implementation and I've only just installed it.
Any idea when it'll get resolved?

[adhip94]

I've already emailed @xcarpentier, he replied back acknowledging he would do a release. Not sure when though...

[77TecShaeer]

can any one make fork of Repo ? and make that edit

[Ludolapert]

Thank you for the follow up @adhip94!

Could we have an estimation of a release date for this fix @xcarpentier ?

[yasimoha]

hi has there been any progress? becuase im still facing this isssue.

[habovh]

@yasimoha and anyone needing a quick fix for production apps, you may apply the patch described by @horo42 here: #2090 (comment)

[horo42]

Changer to

This workaround probably pushes the same callback references to the listener callbacks array, and then instantly removes them, leaving the originals (from attachKeyboardListeners) attached. Which is probably fine, but you don't have to settle, you're already patching into node_modules anyway.

@horo42 after updating the MessageContainer file, i get the error node_modules\react-native-gifted-chat\lib\messagecontainer.js: cannot find module 'metro-react-native-babel-preset' I tried to update the package.json file and also tried to add metro-react-natiev-babel-preset in the package and comment out the transform in package json, cleared the npm cache, clean android project but nothing helped....

Most likely an issue with the optional chaining operator. You can try to fix your config, fall back to if statements, or even this.willShowSub && this.willShowSub.remove();

[emendel]

in MessageContainer.js constructor

this.attachKeyboardListeners = () => {
    const { invertibleScrollViewProps: invertibleProps } = this.props;
    if (invertibleProps) {
-        Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
-        Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
-        Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
-        Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
+        this.willShowSub = Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
+        this.didShowSub = Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
+        this.willHideSub = Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
+        this.didHideSub = Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
    }
};
this.detachKeyboardListeners = () => {
    const { invertibleScrollViewProps: invertibleProps } = this.props;
-    Keyboard.removeListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
-    Keyboard.removeListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
-    Keyboard.removeListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
-    Keyboard.removeListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
+    this.willShowSub?.remove();
+    this.didShowSub?.remove();
+    this.willHideSub?.remove();
+    this.didHideSub?.remove();
};

you can apply this fix with https://github.com/ds300/patch-package until the maintainers fix this

Could you make a PR with this change so they can merge it?

[calcazar]

Any updates on this?

[Biplovkumar]

Any update?

[Biplovkumar]

        this.attachKeyboardListeners = () => {
            const { invertibleScrollViewProps: invertibleProps } = this.props;
            if (invertibleProps) {
                this.willShowSub = Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
                this.didShowSub = Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
                this.willHideSub = Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
                this.didHideSub = Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
            }
        };
        this.detachKeyboardListeners = () => {
            const { invertibleScrollViewProps: invertibleProps } = this.props;
            this.willShowSub?.remove();
            this.didShowSub?.remove();
            this.willHideSub?.remove();
            this.didHideSub?.remove();
        };
        

just need to update these lines in node_modules/react-native-gifted-chat/lib/MessageContainer.jsthis file.
It is temporary solution.

[sheggietyn]

update

[mehdinourollah]

I still have this issue ...any update on patch?!
React Native version = 0.66.0

[meirav-s]

also me, Im waiting to the fix to be published.
any update on it?
its urgent...

[stale]

Sorry, but this issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. BTW Thank you for your contributions 😀 !!!

[habovh]

I'm not sure a fix has been issued, so please remove the Stale label unless the event listeners have actually been updated.

[Johan-dutoit]

Closing as this is fixed in latest beta.