KeyboardAccessoryView no longer working as of React 18

[gurs1kh]

Description

It appears that the KeyboardAccessoryView component no longer works as expected. When toggle to a custom keyboard, I was getting this following error. After seeing this, I decided to clone this repo to run the demo and I saw the same exact issue.

ERROR  Error: Argument appears to not be a ReactComponent. Keys: isFocused,focus,blur,clear,validate,isValid

I looked a bit more into it and tracked the issue down to this line:
https://github.com/wix/react-native-ui-lib/blob/master/lib/components/Keyboard/KeyboardInput/TextInputKeyboardManager/TextInputKeyboardManager.ios.ts#L47

I think it's most likely related to the recent changes regarding findNodeHandle, which is mentioned to be incompatible with React 18:
https://reactnative.dev/docs/0.70/new-architecture-library-intro#preparing-your-javascript-codebase-for-the-new-react-native-renderer-fabric

I have not tested on Android, but I'd assume it wouldn't work there either if what's mentioned above is the cause of this issue.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

1. clone and install dependencies for react-native-ui-lib
2. run yarn run ios
3. go to KeyboardAccessoryView screen in app
4. tap either of the keyboard accessory buttons to toggle the keyboard
5. see error

Expected behavior

When the keyboard toggle button is tapped, the custom keyboard should be shown

Actual behavior

When the keyboard is toggled, you get this error:

ERROR  Error: Argument appears to not be a ReactComponent. Keys: isFocused,focus,blur,clear,validate,isValid

This error is located at:
    in IGNORE (created by CustomKeyboardView)
    in CustomKeyboardView (created by KeyboardAccessoryView)
    in KeyboardTrackingViewTemp (created by KeyboardTrackingView)
    in KeyboardTrackingView
    in _c (created by KeyboardAccessoryView)
    in KeyboardAccessoryView (created by KeyboardAccessoryViewScreen)
    in RCTView (created by View)
    in View
    in View (created by KeyboardAccessoryViewScreen)
    in KeyboardAccessoryViewScreen (created by WrappedComponent)
    in WrappedComponent
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in unicorn.nativeComponents.KeyboardAccessoryViewScreen(RootComponent), js engine: hermes

More Info

Code snippet

No changes from master branch

Screenshots/Video

Simulator.Screen.Recording.-.iPhone.14.-.2023-11-28.at.18.38.14.mp4

Environment

• React Native version: 0.71.2
• React Native UI Lib version: 7.0.0

Affected platforms

• Android
• iOS
• Web

[GregNing]

trying pass ref to renderContent for textInput, if you have use kbInputRef

[dungdt9x]

It already have textInputRef but still get errors. Please check it again @GregNing

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.