EventEmitter.removeListener('keyboardDidHide', ...): Method has been deprecated

Question

Please help me, I don't know what this warning is. I'm trying to render a chat room with chat messages between two users from Cloud Firestore database. This warning throws when I render the ChatRoom screen. This worked for me without warnings on android on my previous project, not here I run on iOS. React version 17.0.2, react native version 0.66.4

full warning

EventEmitter.removeListener('keyboardDidHide', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.

code

const ChatRoom = ({ navigation, route }) => {
  React.useEffect(() => {
    async function fetch() {
      const response = await getUserData(receiverId);
      setChatImage(response.userimg);

      const chat = await getChat(user.uid, userid);

      if (chat) {
        const unsubscribe = firestore()
          .collection("Messages")
          .where("chatid", "==", chat)
          .onSnapshot((querySnapshot) => {
            const messages = querySnapshot
              .docChanges()
              .filter(({ type }) => type === "added")
              .map(({ doc }) => {
                const message = doc.data();
                return {
                  ...message,
                  createdAt: message.createdAt.toDate(),
                };
              })
              .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
            appendMessages(messages);
          });

        return () => unsubscribe();
      }
    }
    fetch();
  }, []);

  const appendMessages = React.useCallback(
    (messages) => {
      setMessages((previousMessages) =>
        GiftedChat.append(previousMessages, messages)
      );
    },
    [messages]
  );

  const handleSend = async (messages) => {
    // if there are no chats, create one
    const chat = await getChat(user.uid, userid);
    let chatid;
    if (!chat) {
      chatid = await createChat(user.uid, userid);
    }

    // add the messages
    const writes = messages.map((m) =>
      firestore()
        .collection("Messages")
        .add({
          ...m,
          sent: true,
          received: false,
          senderid: user.uid,
          receiverid: userid,
          chatid: chat ? chat : chatid,
        })
    );
    await Promise.all(writes);
  };

  return (
    <View>
      <GiftedChat
        messages={messages}
        user={{_id: user.uid}}
        onSend={handleSend}
        showAvatarForEveryMessage={true}
      />
    </View>
  );
};

export default ChatRoom;

Answer 1

As I don't see any manual EventListener manipulation in your code, I assume you can't do anything.

It probably comes from a library/package you're using elsewhere, in this case, something that has to do with hiding the keyboard ('keyboardDidHide' in the error...).

Note that it is only a warning and only a deprecation, meaning it still works but is not the recommended way anymore. Try to track down what library is causing this and watch for their issues in GitHub.

Other than that, there's nothing much you can do and your code will continue to work.

EDIT: Digging further with what you gave, I found the docs of the React Native's Keyboard component stating exactly what is said in the error.

Get the listener returned by addListener, and use .remove() on it.

Example code:

const myListener = Keyboard.addListener("someListener", () => {
  // do things here
});

// do some more things
// once you're done, call this
myListener.remove();

Answer 2

I have the same issue. For now I am just disabling it with this in my App.tsx file.

LogBox.ignoreLogs(['EventEmitter.removeListener'])

Answer 3

I have exactly the same problem, but based on the expo-secure-store library it seems that the latest version is not yet compatible with expo sdk 45 updates, the only thing I could do is ignore the Wharing as mentioned before @jose garcia

LogBox.ignoreLogs(['EventEmitter.removeListener'])