Library not Compatible with React Native 0.65.1 - Keyboard.removeListener is not a function

[lironsher]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Solving this issue: #2090 and #2094

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.js b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
index 193772a..637fdc9 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
@@ -63,10 +63,10 @@ export default class MessageContainer extends React.PureComponent {
         };
         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);
+            Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow).remove();
+            Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow).remove();
+            Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide).remove();
+            Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide).remove();
         };
         this.renderTypingIndicator = () => {
             if (Platform.OS === 'web') {

This issue body was partially generated by patch-package.

[Johan-dutoit]

That looks like it'll cause memory leaks. As the events are being added in the function above. So effectively the initial ones are never removed.

Here's the patch I went with

diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.js b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
index 193772a..c639b01 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
@@ -47,6 +47,10 @@ const styles = StyleSheet.create({
     },
 });
 export default class MessageContainer extends React.PureComponent {
+    keyboardWillShowSubscription = null;
+    keyboardDidShowSubscription = null;
+    keyboardWillHideSubscription = null;
+    keyboardDidHideSubscription = null;
     constructor() {
         super(...arguments);
         this.state = {
@@ -55,18 +59,18 @@ export default class MessageContainer extends React.PureComponent {
         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.keyboardWillShowSubscription = Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
+                this.keyboardDidShowSubscription = Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
+                this.keyboardWillHideSubscription = Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
+                this.keyboardDidHideSubscription = 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.keyboardWillShowSubscription?.remove()
+            this.keyboardDidShowSubscription?.remove()
+            this.keyboardWillHideSubscription?.remove()
+            this.keyboardDidHideSubscription?.remove()
         };
         this.renderTypingIndicator = () => {
             if (Platform.OS === 'web') {

[emendel]

That looks like it'll cause memory leaks. As the events are being added in the function above. So effectively the initial ones are never removed.

Here's the patch I went with

diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.js b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
index 193772a..c639b01 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
@@ -47,6 +47,10 @@ const styles = StyleSheet.create({
     },
 });
 export default class MessageContainer extends React.PureComponent {
+    keyboardWillShowSubscription = null;
+    keyboardDidShowSubscription = null;
+    keyboardWillHideSubscription = null;
+    keyboardDidHideSubscription = null;
     constructor() {
         super(...arguments);
         this.state = {
@@ -55,18 +59,18 @@ export default class MessageContainer extends React.PureComponent {
         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.keyboardWillShowSubscription = Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
+                this.keyboardDidShowSubscription = Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
+                this.keyboardWillHideSubscription = Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
+                this.keyboardDidHideSubscription = 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.keyboardWillShowSubscription?.remove()
+            this.keyboardDidShowSubscription?.remove()
+            this.keyboardWillHideSubscription?.remove()
+            this.keyboardDidHideSubscription?.remove()
         };
         this.renderTypingIndicator = () => {
             if (Platform.OS === 'web') {

Can you make a PR with this change so they can update the package?

[Johan-dutoit]

@emendel I don't mind, but I think this package is abandoned. With the last change being made 8 months ago.

[adamgajzlerowicz]

I think we need a fork...

[emendel]

@emendel I don't mind, but I think this package is abandoned. With the last change being made 8 months ago.

You're probably right. Do you know any other packages that could be an alternative to this?

[emendel]

I think we need a fork...

I used npm patch-package to fix it on my local machine. It was an easy setup

[raymondji]

https://github.com/facebook/react-native/releases/tag/v0.66.3 re-implements the method (although it is still deprecated).

[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 😀 !!!