diff --git a/app/components/markdown/markdown_latex_block/index.tsx b/app/components/markdown/markdown_latex_block/index.tsx index 65437cb9e..1e27b1c72 100644 --- a/app/components/markdown/markdown_latex_block/index.tsx +++ b/app/components/markdown/markdown_latex_block/index.tsx @@ -6,11 +6,11 @@ import Clipboard from '@react-native-clipboard/clipboard'; import React, {useCallback, useMemo} from 'react'; import {useIntl} from 'react-intl'; import {Keyboard, View, Text, StyleSheet, Platform} from 'react-native'; -import MathView from 'react-native-math-view'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; import FormattedText from '@components/formatted_text'; import ErrorBoundary from '@components/markdown/error_boundary'; +import MathView from '@components/math_view'; import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {Screens} from '@constants'; diff --git a/app/components/markdown/markdown_latex_inline/index.tsx b/app/components/markdown/markdown_latex_inline/index.tsx index 801f8cc92..4495d7445 100644 --- a/app/components/markdown/markdown_latex_inline/index.tsx +++ b/app/components/markdown/markdown_latex_inline/index.tsx @@ -3,16 +3,16 @@ import React from 'react'; import {useIntl} from 'react-intl'; -import {Text, View} from 'react-native'; -import MathView from 'react-native-math-view'; +import {Text, View, type DimensionValue} from 'react-native'; import ErrorBoundary from '@components/markdown/error_boundary'; +import MathView from '@components/math_view'; import {makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; type Props = { content: string; - maxMathWidth: number | string; + maxMathWidth: DimensionValue; theme: Theme; } diff --git a/app/components/math_view/index.tsx b/app/components/math_view/index.tsx new file mode 100644 index 000000000..057ec3578 --- /dev/null +++ b/app/components/math_view/index.tsx @@ -0,0 +1,30 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useId, useMemo} from 'react'; +import RNMathView from 'react-native-math-view'; + +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; + +// From node_modules/react-native-math-view/src/common.tsx +type Props = { + math: string; + onError?: (error: Error) => any; + renderError: ({error}: {error: Error}) => JSX.Element; + resizeMode: 'cover' | 'contain'; + style: StyleProp>; +} + +const MathView = (props: Props) => { + const id = useId(); + const config = useMemo(() => ({id}), []); + + return ( + + ); +}; + +export default MathView; diff --git a/app/screens/latex/index.tsx b/app/screens/latex/index.tsx index adf79cf4a..43dd0fdc1 100644 --- a/app/screens/latex/index.tsx +++ b/app/screens/latex/index.tsx @@ -3,9 +3,9 @@ import React, {useCallback} from 'react'; import {Platform, ScrollView, Text, View} from 'react-native'; -import MathView from 'react-native-math-view'; import {SafeAreaView, type Edge} from 'react-native-safe-area-context'; +import MathView from '@components/math_view'; import {useTheme} from '@context/theme'; import useAndroidHardwareBackHandler from '@hooks/android_back_handler'; import {popTopScreen} from '@screens/navigation';