fix emoji types (#6421)

src/components/floating-emojis/FloatingEmoji.tsx

@@ -15,7 +15,7 @@ interface FloatingEmojiProps {
   marginTop?: number;
   opacityThreshold?: number;
   scaleTo: number;
-  size: string;
+  size: number;
   top?: number;
   wiggleFactor?: number;
 }
@@ -93,12 +93,12 @@ const FloatingEmoji: React.FC<FloatingEmojiProps> = ({
           left,
           marginTop,
           position: 'absolute',
-          top: centerVertically ? undefined : top ?? Number(size) * -0.5,
+          top: centerVertically ? undefined : top ?? size * -0.5,
         },
         animatedStyle,
       ]}
     >
-      <Emoji name={emoji} />
+      <Emoji name={emoji} size={size} />
     </Animated.View>
   );
 };

src/components/floating-emojis/FloatingEmojis.tsx

@@ -113,8 +113,8 @@ const FloatingEmojis: React.FC<FloatingEmojisProps> = ({
                 duration={duration}
                 emoji={emojiToRender}
                 index={index}
-                left={typeof size === 'number' ? x - size / 2 : x - Number(size) / 2}
-                size={`${size}`}
+                left={x - size / 2}
+                size={size}
                 top={y}
               />
             ))
@@ -133,7 +133,7 @@ const FloatingEmojis: React.FC<FloatingEmojisProps> = ({
                 marginTop={marginTop}
                 opacityThreshold={opacityThreshold}
                 scaleTo={scaleTo}
-                size={`${size}`}
+                size={size}
                 top={y}
                 wiggleFactor={wiggleFactor}
               />

src/components/floating-emojis/GravityEmoji.tsx

@@ -1,14 +1,15 @@
 import React, { useLayoutEffect } from 'react';
 import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { Emoji } from '../text';
+import { TextSize } from '../text/types';
 
 interface GravityEmojiProps {
   distance: number;
   duration: number;
   emoji: string;
   index: number;
   left: number;
-  size: string;
+  size: TextSize;
   top: number;
 }
 

src/components/sheet/sheet-action-buttons/SheetActionButton.tsx

@@ -158,7 +158,6 @@ const SheetActionButton: React.FC<Props> = ({
         )}
       </ShadowStack>
       <Content label={label} size={size}>
-        {/* @ts-expect-error JavaScript component with an improper type inferred for lineHeight */}
         {emoji && <Emoji lineHeight={23} name={emoji} size="medium" />}
         {icon && <Icon color="white" height={18} name={icon} size={18} />}
         {label ? (

src/components/text/Emoji.tsx

@@ -2,7 +2,8 @@ import { isString } from 'lodash';
 import React, { ReactNode } from 'react';
 import Text from './Text';
 import { emojis } from '@/references';
-import { fonts } from '@/styles';
+import { TextAlign, TextLetterSpacing, TextSize, TextLineHeight } from './types';
+import { TextStyle, StyleProp } from 'react-native';
 
 const emojiData = Object.entries(emojis).map(([emojiChar, { name }]) => {
   return [name, emojiChar];
@@ -22,20 +23,14 @@ function getEmoji(name: unknown): string | null {
   const result = emoji.get(normalizeName(name));
   return result ?? null;
 }
-
-export interface TextProps {
-  isEmoji?: boolean;
-  letterSpacing?: string;
-  lineHeight?: string;
-  size?: keyof typeof fonts.size;
-  [key: string]: unknown;
-}
-
-export interface EmojiProps extends Omit<TextProps, 'isEmoji' | 'lineHeight' | 'letterSpacing' | 'children'> {
-  children?: ReactNode;
-  letterSpacing?: string;
-  lineHeight?: string;
+interface EmojiProps {
+  letterSpacing?: TextLetterSpacing;
+  lineHeight?: TextLineHeight;
+  size?: TextSize;
+  align?: TextAlign;
   name?: string;
+  children?: ReactNode;
+  style?: StyleProp<TextStyle>;
 }
 
 export default function Emoji({

src/components/text/types.ts

@@ -0,0 +1,7 @@
+import { fonts } from '@/styles';
+
+export type TextSize = number | keyof typeof fonts.size;
+export type TextLineHeight = number | keyof typeof fonts.lineHeight;
+export type TextLetterSpacing = number | keyof typeof fonts.letterSpacing;
+export type TextWeight = number | keyof typeof fonts.weight;
+export type TextAlign = 'auto' | 'center' | 'left' | 'justify' | 'right';