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

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-gifted-chat@0.16.3 for the project I’m working on.

Solving this issue: https://github.com/FaridSafi/react-native-gifted-chat/issues/2090 and https://github.com/FaridSafi/react-native-gifted-chat/issues/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') {

[stale[bot]]

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