Add default font size for emojis in live markdown input

src/components/Composer/index.native.tsx

@@ -27,14 +27,15 @@ function Composer(
         // user can read new chats without the keyboard in the way of the view.
         // On Android the selection prop is required on the TextInput but this prop has issues on IOS
         selection,
+        value,
         ...props
     }: ComposerProps,
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
     const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
     const theme = useTheme();
-    const markdownStyle = useMarkdownStyle();
+    const markdownStyle = useMarkdownStyle(value);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
@@ -73,6 +74,7 @@ function Composer(
             autoComplete="off"
             placeholderTextColor={theme.placeholderText}
             ref={setTextInputRef}
+            value={value}
             onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)}
             rejectResponderTermination={false}
             smartInsertDelete={false}

src/components/Composer/index.tsx

@@ -81,7 +81,7 @@ function Composer(
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const markdownStyle = useMarkdownStyle();
+    const markdownStyle = useMarkdownStyle(value);
     const StyleUtils = useStyleUtils();
     const {windowWidth} = useWindowDimensions();
     const textRef = useRef<HTMLElement & RNText>(null);

src/hooks/useMarkdownStyle.ts

@@ -1,11 +1,13 @@
 import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
 import {useMemo} from 'react';
+import {containsOnlyEmojis} from '@libs/EmojiUtils';
 import FontUtils from '@styles/utils/FontUtils';
 import variables from '@styles/variables';
 import useTheme from './useTheme';
 
-function useMarkdownStyle(): MarkdownStyle {
+function useMarkdownStyle(message: string | null = null): MarkdownStyle {
     const theme = useTheme();
+    const emojiFontSize = containsOnlyEmojis(message ?? '') ? variables.fontSizeOnlyEmojis : variables.fontSizeNormal;
 
     const markdownStyle = useMemo(
         () => ({
@@ -18,6 +20,9 @@ function useMarkdownStyle(): MarkdownStyle {
             h1: {
                 fontSize: variables.fontSizeLarge,
             },
+            emoji: {
+                fontSize: emojiFontSize,
+            },
             blockquote: {
                 borderColor: theme.border,
                 borderWidth: 4,
@@ -45,7 +50,7 @@ function useMarkdownStyle(): MarkdownStyle {
                 backgroundColor: theme.mentionBG,
             },
         }),
-        [theme],
+        [theme, emojiFontSize],
     );
 
     return markdownStyle;