[BUG]: application crashes when using the useEditorBridge hook
ConstSkripl opened this issue · 5 comments
ConstSkripl commented
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
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",
17Amir17 commented
Could you share your source code? Or share a repo where this is reproduced?
ConstSkripl commented
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>
);
};
17Amir17 commented
Are you using expo?
ConstSkripl commented
Are you using expo?
no
17Amir17 commented
I am unable to reproduce this. Could you provide a repo with the minimum amount of changes needed to reproduce?