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 }}>

  <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 ; }

### 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?