10play/10tap-editor

[BUG]: application crashes when using the useEditorBridge hook

ConstSkripl opened this issue · 5 comments

Describe the bug
A clear and concise description of what the bug is.
when I add to the code
const editor = useEditorBridge();
the application crashes and the following error appears
image
image

I'm using versions
"@10play/tentap-editor": "^0.5.19",
"react-native-webview": "^13.12.1",
"react": "18.2.0",
"react-native": "0.71.11",

Could you share your source code? Or share a repo where this is reproduced?

when adding the line (const editor = useEditorBridge();) the application immediately crashes. I can add it in any part of the code, and this error is shown

import { RichText, Toolbar, useEditorBridge, BridgeExtension } from '@10play/tentap-editor';
import { useRoute } from '@react-navigation/native';
import { Platform } from 'react-native';
import { Edge } from 'react-native-safe-area-context';

import { isHeaderTransparent } from 'utils/isHeaderTransparent';
import { screensWithoutFooter } from 'utils/isTabBarVisible';

import { BASIC_SCROLL_HEIGHT, EXTRA_HEIGHT, EXTRA_SCROLL_HEIGHT, KEYBOARD_VERTICAL_OFFSET } from './constants';
import * as Styled from './styles';
import { SafeAreaViewContainerProps } from './types';

export const SafeAreaViewContainer: React.FC<SafeAreaViewContainerProps> = ({
  children,
  disableVerticalOffset,
  disableHorizontalOffset,
  isScrollable,
  contentContainerStyle,
  keyboardShouldPersistTaps,
  disableExtraHeight,
  paddingTop,
  paddingBottom,
  disableKeyboardOffset = false,
}) => {
  const route = useRoute();
  const editor = useEditorBridge();

  const getExtraScrollHeight = () => {
    // useBottomTabBarHeight() throws error when outside tab.navigator
    try {
      const isTabBarVisible = !screensWithoutFooter.includes(route.name);

      return isTabBarVisible ? EXTRA_SCROLL_HEIGHT : BASIC_SCROLL_HEIGHT;
    } catch {
      console.warn('There is no BottomTabBar on this screen');
    }
  };

  const getEdges = (): Edge[] => (isHeaderTransparent(route.name) ? ['left', 'top'] : ['left']);

  const extraScrollHeight = getExtraScrollHeight();

  return (
    // TODO - it's probably not even needed to use safearea here, it mostly
    // is handled by navigation headers or nav bottom tabs. but just to be on
    // the safe side it's left here with edges={['left']} - top, bottom or none at all
    // lead to ugly paddings on ios
    <Styled.SafeAreaViewStyled edges={getEdges()}>
      <Styled.Container
        disableVerticalOffset={disableVerticalOffset}
        disableHorizontalOffset={disableHorizontalOffset}
        paddingTop={paddingTop}
        paddingBottom={paddingBottom}
      >
        {isScrollable ? (
          <Styled.KeyboardAwareScrollView
            contentContainerStyle={contentContainerStyle}
            extraScrollHeight={!disableExtraHeight ? extraScrollHeight : 0}
            extraHeight={!disableExtraHeight ? EXTRA_HEIGHT : 0}
            keyboardShouldPersistTaps={keyboardShouldPersistTaps}
            enableResetScrollToCoords={false}
          >
            {children}
          </Styled.KeyboardAwareScrollView>
        ) : (
          <>
            {/* <RichText editor={editor} /> */}
            <Styled.KeyboardAvoidingView
              behavior="padding"
              keyboardVerticalOffset={disableKeyboardOffset ? 0 : KEYBOARD_VERTICAL_OFFSET}
              enabled={Platform.OS === 'ios'}
            >
              {/* <Toolbar editor={editor} /> */}
              {children}
            </Styled.KeyboardAvoidingView>
          </>
        )}
      </Styled.Container>
    </Styled.SafeAreaViewStyled>
  );
};

Are you using expo?

Are you using expo?

no

I am unable to reproduce this. Could you provide a repo with the minimum amount of changes needed to reproduce?