Invariant Violation: requireNativeComponent: "TenTapView" was not found in the UIManager.

[QuentinBoulay]

I have this error : Invariant Violation: requireNativeComponent: "TenTapView" was not found in the UIManager.

import PenIcon from "@/assets/icons/PenIcon";
import { useKeyboard, useBridgeState, Toolbar, ColorKeyboard } from "@10play/tentap-editor";

const ToolbarWithColor = ({
  editor,
  activeKeyboard,
  setActiveKeyboard
}) => {
  // Get updates of editor state
  const editorState = useBridgeState(editor);

  const { isKeyboardUp: isNativeKeyboardUp } = useKeyboard();
  const customKeyboardOpen = activeKeyboard !== undefined;
  const isKeyboardUp = isNativeKeyboardUp || customKeyboardOpen;

  // Here we make sure not to hide the keyboard if our custom keyboard is visible
  const hideToolbar =
    !isKeyboardUp || (!editorState.isFocused && !customKeyboardOpen);

  return (
    <Toolbar
      editor={editor}
      hidden={hideToolbar}
      items={[
        {
          onPress: () => () => {
            const isActive = activeKeyboard == ColorKeyboard.id;
            if (isActive) editor.focus();
            setActiveKeyboard(isActive ? undefined : ColorKeyboard.id);
          },
          active: () => activeKeyboard === ColorKeyboard.id,
          disabled: () => false,
          image: () => PenIcon,
        },
      ]}
    />
  )
}

export default ToolbarWithColor

import { SafeAreaView, KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
import { useEditorBridge, RichText, PlaceholderBridge, useEditorContent, CoreBridge, TenTapStartKit, ColorBridge, HighlightBridge, ImageBridge, CustomKeyboard } from '@10play/tentap-editor';
import { useEffect, useRef, useState } from 'react';
import FigtreeRegular64 from "@/assets/fonts/figtree/Figtree-Regular_base64"
import { SIZE } from '@/assets/themes/theme';
import ToolbarWithColor from './ToolbarWithColor';

const Wysiwyg = ({
    displayToolbar,
    placeholder,
    onChange,
    onEditorReady
}) => {

    const customFont = `
        @font-face {
            font-family: 'Figtree';
            src: url('${FigtreeRegular64}');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        * {
            font-family: 'Figtree';
            word-break: break-word;
        }
    `
    
    const rootRef = useRef(null)

    const [activeKeyboard, setActiveKeyboard] = useState()

    const editor = useEditorBridge({
        avoidIosKeyboard: true,
        bridgeExtensions: [
            ...TenTapStartKit,
            PlaceholderBridge.configureExtension({
                placeholder: placeholder,
            }),
            CoreBridge.configureCSS(customFont),
            ColorBridge.configureExtension({
                types: ['textStyle'],
            }),
            HighlightBridge,
            ImageBridge.configureExtension({
                inline: true,
            })
        ],
    })

    const content = useEditorContent(editor, { type: 'html' })

    useEffect(() => {
        onChange(content)
    }, [content])

    useEffect(() => {
        onEditorReady(editor)
    }, [editor])

    return (
        <SafeAreaView style={{ flex: 1 }} ref={rootRef}>
            <View style={{ flex: 1, paddingHorizontal: SIZE.padding }}>
                <RichText editor={editor} />
            </View>
            {displayToolbar && (
                <KeyboardAvoidingView
                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                    style={styles.keyboardAvoidingView}
                >
                    <ToolbarWithColor
                        editor={editor}
                        activeKeyboard={activeKeyboard}
                        setActiveKeyboard={setActiveKeyboard}
                        ColorKeyboard={ColorKeyboard}
                    />
                    <CustomKeyboard
                        rootRef={rootRef}
                        activeKeyboardID={activeKeyboard}
                        setActiveKeyboardID={setActiveKeyboard}
                        keyboards={[ColorKeyboard]}
                        editor={editor}
                    />
                </KeyboardAvoidingView>
            )}
        </SafeAreaView>
    )
}

export default Wysiwyg

const styles = StyleSheet.create({
    keyboardAvoidingView: {
        position: 'absolute',
        width: '100%',
        bottom: 0,
    },
})

[Dan Ayasch]

Is there any solution for this issue ?

[Amir Angel]

Is there any solution for this issue ?

Try installing pods and rebuilding the app