KeyboardAccessoryView not working on ios

[Artur-developer12]

Description

Hi, I am getting this error when trying to change the keyboard "Argument appears to not be a ReactComponent. Keys: current". This error appears only on ios, for android everything works.

 ERROR  Error: Argument appears to not be a ReactComponent. Keys: current

This error is located at:
    in IGNORE (created by CustomKeyboardView)
    in CustomKeyboardView (created by KeyboardAccessoryView)
    in KeyboardTrackingViewTemp (created by KeyboardTrackingView)
    in KeyboardTrackingView
    in Unknown (created by KeyboardAccessoryView)
    in KeyboardAccessoryView
    in TextEditPanel (created by DayScreen)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in KeyboardAvoidingView (created by emotion(KeyboardAvoidingView))
    in emotion(KeyboardAvoidingView) (created by DayScreen)
    in BVLinearGradient (created by LinearGradient)
    in LinearGradient (created by Gradient)
    in Gradient (created by emotion(Gradient))
    in emotion(Gradient) (created by DayScreen)
    in RCTView (created by View)
    in View (created by SharedElement)
    in SharedElement
    in SharedElement (created by DayScreen)
    in DayScreen (created by SharedElementSceneView)
    in RCTView (created by View)
    in View (created by SharedElementSceneView)
    in SharedElementSceneView (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Card)
    in RCTView (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by CardStack)
    in CardStack (created by HeaderShownContext)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by StackView)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackView)
    in StackView
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown
    in SharedElementStackNavigator (created by WrapNavigator)
    in WrapNavigator (created by MainStack)
    in MainStack (created by Routes)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Routes)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by Routes)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by Routes)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by Routes)
    in Routes (created by App)
    in ThemeProvider (created by App)
    in PersistGate (created by App)
    in Provider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in Task View(RootComponent), js engine: hermes

Related to

• [x] Components

• KeyboardAccessoryView

Code snippet

    <KeyboardAccessoryView
      addBottomView
      onKeyboardResigned={() => setCustomComponent(undefined)}
      kbInputRef={inputRef}
      kbComponent={customComponent}
      useSafeArea
      renderContent={renderContent}
      revealKeyboardInteractive
    />

Environment

• React Native version: 0.71.1
• React Native UI Lib version: 7.2.0

Affected platforms

• [x] iOS

[sevenbytez]

It would be useful to see what you are passing on kbComponent. Also there's the setCustomComponent it could be somehow related to the issue, since you're setting to undefined at some point. Could you provide those information as well?

[Artur-developer12]

In customComponent, I pass the KeyboardComponentID of the component that I registered with Keyboard.KeyboardRegistry.registerKeyboard

  const KeyboardComponentID = 'unicorn.Test'
  const KeyboardComponent = () => <View style={{ backgroundColor: 'red', flex: 1 }} />
  Keyboard.KeyboardRegistry.registerKeyboard(KeyboardComponentID, () => KeyBoardComponent)

setCustomComponent(undefined) i use to reset selected keyboard

[Artur-developer12]

I managed to solve the problem, it turned out that I did not pass the ref to the TextInput inside the renderContent. Thanks for taking the time to solve my problem