perf: improve keyboard interaction timing (#3541)

## 🎯 Goal

<!-- Describe why we are making this change -->

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -20,7 +20,9 @@ import {
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
 
-const useWithPortalKeyboardSafety = <T extends unknown[]>(callback: (...args: T) => void) => {
+export const useWithPortalKeyboardSafety = <T extends unknown[]>(
+  callback: (...args: T) => void,
+) => {
   const callbackAfterKeyboardOpen = useAfterKeyboardOpenCallback(callback);
 
   return usePortalSettledCallback(callbackAfterKeyboardOpen);

package/src/hooks/useAfterKeyboardOpenCallback.ts

@@ -1,8 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { EventSubscription, Keyboard, Platform } from 'react-native';
 
-import { useKeyboardVisibility } from './useKeyboardVisibility';
-
 import { useStableCallback } from './useStableCallback';
 
 import { KeyboardControllerPackage } from '../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
@@ -18,7 +16,6 @@ import { useMessageInputContext } from '../contexts/messageInputContext/MessageI
 export const useAfterKeyboardOpenCallback = <T extends unknown[]>(
   callback: (...args: T) => void,
 ) => {
-  const isKeyboardVisible = useKeyboardVisibility();
   const { inputBoxRef } = useMessageInputContext();
   const keyboardSubscriptionRef = useRef<EventSubscription | undefined>(undefined);
   // This callback runs from a keyboard event listener, so it must stay fresh across rerenders.
@@ -45,7 +42,7 @@ export const useAfterKeyboardOpenCallback = <T extends unknown[]>(
       return;
     }
 
-    if (isKeyboardVisible) {
+    if (Keyboard.isVisible()) {
       inputBoxRef.current.focus();
       runCallback();
       return;