react-native-gifted-chat: _reactNative.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.

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..e26443e 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { FlatList, View, StyleSheet, Keyboard, TouchableOpacity, Text, Platform, } from 'react-native';
+import { FlatList, View, StyleSheet, Keyboard, TouchableOpacity, Text, Platform } from 'react-native';
 import LoadEarlier from './LoadEarlier';
 import Message from './Message';
 import Color from './Color';
@@ -55,18 +55,26 @@ 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);
+                //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);
+            //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();
         };
         this.renderTypingIndicator = () => {
             if (Platform.OS === 'web') {

This issue body was partially generated by patch-package.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 20
  • Comments: 20

Most upvoted comments

May you create a PR with these changes?

Update MessageContainer.js with patch-package (install patch-package before) step 1 – vim node_modules/react-native-gifted-chat/lib/MessageContainer.js (open file with vim filename . Type i to switch into insert mode so that you can start editing the file. Enter or modify the text with your file. Once you’re done, press the escape key Esc to get out of insert mode and back to command mode. Type :wq to save and exit your file.

step 2 npx patch-package react-native-gifted-chat

run the app it will work fine

still exists with v 2.4.0

thanks, above question were created when im new in React, now I can solved some small issues like this

@fukemy you’ll need to use React 17 or above with the new JSX transform, like this.

_reactNative.Keyboard.removeListener is not a function