Fintables · batuhanoztrk · Jun 23, 2025 · Jun 23, 2025
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -10,6 +10,9 @@ export default function App() {
           data={data}
           showFallback={true}
           style={styles.editorJsContainer}
+          textProps={{
+            maxFontSizeMultiplier: 1.0,
+          }}
         />
       </ScrollView>
     </SafeAreaView>

diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "!**/.*"
   ],
   "scripts": {
+    "postinstall": "patch-package",
     "example": "yarn workspace react-native-editorjs-viewer-example",
     "test": "jest",
     "typecheck": "tsc",
@@ -77,6 +78,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
+    "patch-package": "^8.0.0",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-native": "0.74.5",
@@ -188,7 +190,6 @@
     "html-entities": "^2.5.2",
     "react-native-code-highlighter": "^1.2.3",
     "react-native-render-html": "^6.3.4",
-    "react-native-syntax-highlighter": "^2.1.0",
     "react-syntax-highlighter": "^15.5.0"
   }
 }
diff --git a/patches/react-native-code-highlighter+1.2.3.patch b/patches/react-native-code-highlighter+1.2.3.patch
@@ -0,0 +1,10 @@
+diff --git a/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx b/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx
+index d034ada..42aaedf 100644
+--- a/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx
++++ b/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx
+@@ -1,4 +1,4 @@
+-import React, { type FunctionComponent, type ReactNode, useMemo } from "react";
++import { type FunctionComponent, type ReactNode, useMemo } from "react";
+ import {
+ 	ScrollView,
+ 	type ScrollViewProps,
diff --git a/src/components/checkList/checkListItem/index.tsx b/src/components/checkList/checkListItem/index.tsx
@@ -24,6 +24,7 @@ export type ICheckListItemProps = {
   textStyle?: TextProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
   checkmarkStyle?: ViewProps['style'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const CheckListItem = ({
@@ -35,12 +36,14 @@ const CheckListItem = ({
   textStyle,
   otherStyles,
   checkmarkStyle,
+  textProps,
 }: ICheckListItemProps) => {
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: {
       ...otherStyles,
       textStyle: textStyle,
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -57,7 +60,9 @@ const CheckListItem = ({
         uncheckedStyle={checkboxUncheckedStyle}
         checkmarkStyle={checkmarkStyle}
       />
-      <Text style={[styles.text, textStyle]}>{parsedText}</Text>
+      <Text {...textProps} style={[styles.text, textStyle]}>
+        {parsedText}
+      </Text>
     </View>
   );
 };

diff --git a/src/components/checkList/index.tsx b/src/components/checkList/index.tsx
@@ -16,6 +16,7 @@ export type ICheckListProps = {
   checkboxUncheckedStyle?: ViewProps['style'];
   checkmarkStyle?: ViewProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const CheckList = ({
@@ -29,6 +30,7 @@ const CheckList = ({
   contentContainerStyle,
   checkmarkStyle,
   otherStyles,
+  textProps,
 }: ICheckListProps) => {
   return (
     <FlatList
@@ -44,6 +46,7 @@ const CheckList = ({
           textStyle={textStyle}
           otherStyles={otherStyles}
           checkmarkStyle={checkmarkStyle}
+          textProps={textProps}
         />
       )}
       keyExtractor={(_, index) => index.toString()}

diff --git a/src/components/code/index.tsx b/src/components/code/index.tsx
@@ -1,8 +1,8 @@
-import { View, StyleSheet } from 'react-native';
+import type { TextProps, ViewProps } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import CodeHighlighter from 'react-native-code-highlighter';
-import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import type { ViewProps, TextProps } from 'react-native';
 import { type CodeHighlighterProps } from 'react-native-code-highlighter/src/lib/CodeHighlighter';
+import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 export type ICodeProps = {
   data: {

diff --git a/src/components/delimiter/index.tsx b/src/components/delimiter/index.tsx
@@ -11,14 +11,25 @@ export type IDelimiterProps = {
   data: Record<string, never>;
   containerStyle?: ViewProps['style'];
   textStyle?: TextProps['style'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
-const Delimiter = ({ containerStyle, textStyle }: IDelimiterProps) => {
+const Delimiter = ({
+  containerStyle,
+  textStyle,
+  textProps,
+}: IDelimiterProps) => {
   return (
     <View aria-hidden style={[styles.container, containerStyle]}>
-      <Text style={[styles.delimiter, textStyle]}>{decode('&ast;')}</Text>
-      <Text style={[styles.delimiter, textStyle]}>{decode('&ast;')}</Text>
-      <Text style={[styles.delimiter, textStyle]}>{decode('&ast;')}</Text>
+      <Text {...textProps} style={[styles.delimiter, textStyle]}>
+        {decode('&ast;')}
+      </Text>
+      <Text {...textProps} style={[styles.delimiter, textStyle]}>
+        {decode('&ast;')}
+      </Text>
+      <Text {...textProps} style={[styles.delimiter, textStyle]}>
+        {decode('&ast;')}
+      </Text>
     </View>
   );
 };

diff --git a/src/components/fallback/index.tsx b/src/components/fallback/index.tsx
@@ -10,12 +10,18 @@ export type IFallbackProps = {
   blockType: string;
   containerStyle?: ViewProps['style'];
   textStyle?: TextProps['style'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
-const Fallback = ({ blockType, containerStyle, textStyle }: IFallbackProps) => {
+const Fallback = ({
+  blockType,
+  containerStyle,
+  textStyle,
+  textProps,
+}: IFallbackProps) => {
   return (
     <View accessibilityRole="alert" style={[styles.container, containerStyle]}>
-      <Text accessible style={[styles.alertText, textStyle]}>
+      <Text accessible {...textProps} style={[styles.alertText, textStyle]}>
         Type &quot;{blockType}&quot; is yet not supported
       </Text>
     </View>

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -10,9 +10,10 @@ export type IHeaderProps = {
   };
   style?: (level: 1 | 2 | 3 | 4 | 5 | 6) => TextProps['style'];
   otherStyles?: (level: 1 | 2 | 3 | 4 | 5 | 6) => IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
-const Header = ({ data, style, otherStyles }: IHeaderProps) => {
+const Header = ({ data, style, otherStyles, textProps }: IHeaderProps) => {
   const headingStyleByLevel = useMemo(
     () => styles[`h${data.level}`],
     [data.level]
@@ -23,6 +24,7 @@ const Header = ({ data, style, otherStyles }: IHeaderProps) => {
       ...otherStyles?.(data.level),
       textStyle: style?.(data.level),
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -35,6 +37,7 @@ const Header = ({ data, style, otherStyles }: IHeaderProps) => {
       accessible
       accessibilityRole="header"
       allowFontScaling={true}
+      {...textProps}
       style={[styles.header, headingStyleByLevel, style?.(data.level)]}
     >
       {parsedText}

diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
@@ -22,6 +22,7 @@ export type IImageProps = {
   imageStyle?: ImageProps['style'];
   textStyle?: TextProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const Image = ({
@@ -30,12 +31,14 @@ const Image = ({
   textStyle,
   imageStyle,
   otherStyles,
+  textProps,
 }: IImageProps) => {
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: {
       ...otherStyles,
       textStyle: textStyle,
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -55,7 +58,7 @@ const Image = ({
       />
 
       {parsedText && (
-        <Text aria-hidden style={[styles.caption, textStyle]}>
+        <Text aria-hidden {...textProps} style={[styles.caption, textStyle]}>
           {parsedText}
         </Text>
       )}

diff --git a/src/components/list/index.tsx b/src/components/list/index.tsx
@@ -22,6 +22,7 @@ export type IListProps = {
     numberTextStyle?: TextProps['style'];
   };
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const List = ({
@@ -30,6 +31,7 @@ const List = ({
   contentContainerStyle,
   listItemStyle,
   otherStyles,
+  textProps,
 }: IListProps) => {
   const sections = useMemo(() => {
     return [{ data: data.items }];
@@ -52,6 +54,7 @@ const List = ({
           dotStyle={listItemStyle?.dotStyle}
           numberTextStyle={listItemStyle?.numberTextStyle}
           otherStyles={otherStyles}
+          textProps={textProps}
         />
       )}
     />

diff --git a/src/components/list/listItem/index.tsx b/src/components/list/listItem/index.tsx
@@ -18,6 +18,7 @@ export type IItemIListProps = {
   numberTextStyle?: TextProps['style'];
   textStyle?: TextProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const ListItem = ({
@@ -29,9 +30,11 @@ const ListItem = ({
   numberTextStyle,
   containerStyle,
   otherStyles,
+  textProps,
 }: IItemIListProps) => {
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: otherStyles,
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -45,7 +48,10 @@ const ListItem = ({
         {
           ordered: <View style={[styles.listStyleDot, dotStyle]} />,
           unordered: (
-            <Text style={[styles.listStyleNumber, numberTextStyle]}>
+            <Text
+              {...textProps}
+              style={[styles.listStyleNumber, numberTextStyle]}
+            >
               {index + 1}.
             </Text>
           ),
@@ -56,6 +62,7 @@ const ListItem = ({
         accessible
         accessibilityRole="text"
         allowFontScaling={true}
+        {...textProps}
         style={[styles.listItem, textStyle]}
       >
         {parsedText}

diff --git a/src/components/paragraph/index.tsx b/src/components/paragraph/index.tsx
@@ -9,14 +9,21 @@ export type IParagraphProps = {
   };
   style?: TextProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
-const Paragraph = ({ data, style, otherStyles }: IParagraphProps) => {
+const Paragraph = ({
+  data,
+  style,
+  otherStyles,
+  textProps,
+}: IParagraphProps) => {
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: {
       ...otherStyles,
       textStyle: style,
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -29,6 +36,7 @@ const Paragraph = ({ data, style, otherStyles }: IParagraphProps) => {
       accessible
       accessibilityRole="text"
       allowFontScaling={true}
+      {...textProps}
       style={[styles.paragraph, style]}
     >
       {parsedText}

diff --git a/src/components/quote/index.tsx b/src/components/quote/index.tsx
@@ -19,6 +19,7 @@ export type IQuoteProps = {
   textStyle?: TextProps['style'];
   captionTextStyle?: TextProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const Quote = ({
@@ -27,12 +28,14 @@ const Quote = ({
   textStyle,
   captionTextStyle,
   otherStyles,
+  textProps,
 }: IQuoteProps) => {
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: {
       ...otherStyles,
       textStyle,
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -45,6 +48,7 @@ const Quote = ({
       <Text
         accessibilityRole="text"
         allowFontScaling={true}
+        {...textProps}
         style={[
           styles.quoteText,
           {
@@ -58,6 +62,7 @@ const Quote = ({
 
       {data.caption && (
         <Text
+          {...textProps}
           style={[
             styles.caption,
             { textAlign: data.alignment ?? 'left' },

diff --git a/src/components/raw/index.tsx b/src/components/raw/index.tsx
@@ -1,15 +1,16 @@
 import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import RenderHtml, { type RenderHTMLProps } from 'react-native-render-html';
-import type { ViewProps } from 'react-native';
+import type { ViewProps, TextProps } from 'react-native';
 
 export type IRawProps = {
   data: {
     html: string;
   };
   containerStyle?: ViewProps['style'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 } & Omit<RenderHTMLProps, 'source' | 'contentWidth'>;
 
-const Raw = ({ data, containerStyle, ...props }: IRawProps) => {
+const Raw = ({ data, containerStyle, textProps, ...props }: IRawProps) => {
   const { width } = useWindowDimensions();
 
   return (
@@ -18,6 +19,7 @@ const Raw = ({ data, containerStyle, ...props }: IRawProps) => {
         {...props}
         contentWidth={width}
         source={{ html: data.html }}
+        defaultTextProps={textProps}
       />
     </View>
   );