Toolbar has no editor!

[danijel2017]

Hi, I am using lib in functional component

const editorRef = useRef();

`return ( <FlatList ListHeaderComponent={

Title is required Sections

    }
    data={sections}
    renderItem={({item, index}) => (
      <VStack space={3}>
        <FormControl>
          <Input
            variant="underlined"
            placeholder="Section title"
            InputLeftElement={<Heading size="sm">{index + 1}. </Heading>}
            value={item.heading}
          />
          <FormControl.ErrorMessage>
            Heading is required
          </FormControl.ErrorMessage>
        </FormControl>

        <FormControl>
          <TextArea
            h={20}
            placeholder="Comment here"
            variant="underlined"
            value={item.comment}
          />
          <FormControl.ErrorMessage>
            Comment is required
          </FormControl.ErrorMessage>
        </FormControl>

        <HStack space={3} alignItems="center">
          <IconButton
            variant="unstyled"
            icon={
              <Icon
                size="md"
                as={<Ionicons name="camera" />}
                color="success.500"
              />
            }
            onPress={() => {
              setSection(item);
              setIsOpenSheet(true);
            }}
          />
          <Divider orientation="vertical" />
          {item.assets.length === 0 && (
            <Heading size="xs">No images or videos</Heading>
          )}
          {!item.showAllAssets &&
            item.assets.slice(0, 3).map(x => {
              return x.type === 'image' ? (
                <Pressable
                  onPress={() => openImageViewer(x.uri)}
                  onLongPress={() => {
                    setIsOpenAlert(!isOpenAlert);
                    setDeleteId(item.id);
                    setDeleteAsset(x);
                  }}
                  key={x.uri}>
                  <Image
                    source={{
                      uri: x.uri,
                    }}
                    alt="Image thumbnail"
                    size={'sm'}
                    borderRadius={4}
                  />
                </Pressable>
              ) : (
                <IconButton
                  variant="outline"
                  colorScheme="primary"
                  w={16}
                  h={16}
                  icon={
                    <Icon
                      size="lg"
                      as={<Entypo name="video" />}
                      color="primary.500"
                    />
                  }
                  key={x.uri}
                  onPress={() => openVideoPlayer(x.uri)}
                  onLongPress={() => {
                    setIsOpenAlert(!isOpenAlert);
                    setDeleteId(item.id);
                    setDeleteAsset(x);
                  }}
                />
              );
            })}

          {item.showAllAssets && (
            <ScrollView horizontal={true}>
              {item.assets.map(x => {
                return x.type === 'image' ? (
                  <Pressable
                    onPress={() => openImageViewer(x.uri)}
                    onLongPress={() => {
                      setIsOpenAlert(!isOpenAlert);
                      setDeleteId(item.id);
                      setDeleteAsset(x);
                    }}
                    key={x.uri}>
                    <Image
                      source={{
                        uri: x.uri,
                      }}
                      alt="Image thumbnail"
                      size={'sm'}
                      borderRadius={4}
                      mr={3}
                    />
                  </Pressable>
                ) : (
                  <IconButton
                    variant="outline"
                    colorScheme="primary"
                    w={16}
                    h={16}
                    mr={3}
                    icon={
                      <Icon
                        size="lg"
                        as={<Entypo name="video" />}
                        color="primary.500"
                      />
                    }
                    key={x.uri}
                    onPress={() => openVideoPlayer(x.uri)}
                    onLongPress={() => {
                      setIsOpenAlert(!isOpenAlert);
                      setDeleteId(item.id);
                      setDeleteAsset(x);
                    }}
                  />
                );
              })}
            </ScrollView>
          )}

          {!item.showAllAssets && item.assets.length > 3 && (
            <Button
              colorScheme="info"
              variant="outline"
              borderRadius={100}
              p={0.5}
              w={8}
              h={8}
              onPress={() => expandAssets(item)}>
              {`+${item.assets.length - 3}`}
            </Button>
          )}
        </HStack>

        <Center pr={4}>
          <Button
            colorScheme="danger"
            variant="outline"
            size="xs"
            borderRadius={8}
            startIcon={
              <Icon
                size="xs"
                as={<Ionicons name="trash" />}
                color="danger.500"
              />
            }
            onPress={() => deleteSection(item)}>
            Delete section
          </Button>
        </Center>
      </VStack>
    )}
    ItemSeparatorComponent={() => <Divider my={4} bg="info.500" />}
    ListFooterComponent={
      <VStack space={4} pr={4} my={4}>
        <Center mb={4}>
          <Button
            colorScheme="info"
            size="sm"
            borderRadius={32}
            startIcon={<Ionicons name="add" color="white" />}
            onPress={addSection}>
            Add new section
          </Button>
        </Center>
        <Button colorScheme="success">Save</Button>
        <Button
          colorScheme="danger"
          _text={{
            color: 'white',
          }}>
          Cancel
        </Button>
      </VStack>
    }
  />)`

When I add this code section to App.js it works well. But when I add it another page that is navigated from App.js using react navigation, I am getting error - Toolbar has no editor! in console

What is wrong?

[KrisLau]

You need to actually add the <RichEditor /> component and set the ref to the editor ref

<RichEditor ref={editor}  />

[Amanek93]

You also need to wait for load RichEditor.

Add to props editorInitializedCallback={editorInitializedCallback}

and create function:

const editorInitializedCallback = () => {
    RichText.current?.registerToolbar(function (items) {});
  };

[ashishAmz]

getting same issue, any update on the solution?

[sairamreddy2211]

same issue any update?

[Yousafzubair991]

Just implemented the solution,

1. Created a local state named "editorAttached" and set it to false.
2. { editorAttached && <RichToolbar {...props}/>}
3. set the state to true when user clicks on the RichTextEditor RichText.current?.registerToolbar(function (items) { seteditorAttached(true) });

And done. It worked for me hope it helps any of you too.

[developer-ayan]

really helpful, Thank you so much