Issue with rendering 10tap-editor toolbar in Expo project using expo-router.

[harshit275]

Hello,

I am trying to integrate the 10tap-editor library into my Expo project using expo-router, but I am facing issues with rendering the toolbar inside the editor. Despite following the setup instructions, the toolbar does not appear on the screen.

Steps to Reproduce:

1. Installed the necessary packages:
   npx expo install @10play/tentap-editor react-native-webview
2. Created an Editor component:

import { useEffect } from "react";
import { KeyboardAvoidingView, Platform, SafeAreaView } from "react-native";
import { RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor";

interface EditorProps {
  content: string;
}

export function Editor({ content }: EditorProps) {
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
  });

  useEffect(() => {
    editor.setContent(content);
  }, [content, editor]);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={{
          position: "absolute",
          width: "100%",
          bottom: 0,
        }}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

3. Integrated the Editor component into the index.js file:

import { Editor } from "@/components/Editor";

export default function EditorScreen() {
  return <Editor content="Start editing!" />;
}

Expected Behavior:

The editor should render on the screen with a toolbar when navigating to the index route.

Actual Behavior:

The editor does appear on the screen but without a toolbar. There are no errors in the console.

Additional Information:

• expo SDK version: [51.0.32]
• expo-router version: [3.5.23]
• 10tap-editor version: [0.5.21]
• react-native-webview: [13.8.6]
• platform: [iOS/Android/Web]

Steps Taken to Troubleshoot:

• Verified that all dependencies are installed correctly.
• Cleared the cache and restarted the development server.
• Added console logs to ensure the Editor component is being rendered.
• Reviewed the 10tap-editor and expo-router documentation for any additional setup steps.

Any help or guidance on resolving this issue would be greatly appreciated. Thank you!

[17Amir17]

Hey @harshit275 ,
Could you try take a look at: https://10play.github.io/10tap-editor/docs/examples/navHeader

[harshit275]

Hey @17Amir17 ,
Thanks for the quick response. The above fix is working but only when I turn the hidden prop in Toolbar component to false.
<Toolbar editor={editor} hidden={false} />

Is this right? Is this how I supposed to do it? Why is this not mentioned in the tutorial? Or is it there and I kind of missed it?