Adjust emoji offsets (#28635)

Author: chrisnojima

shared/chat/conversation/input-area/suggestors/emoji.tsx

@@ -2,13 +2,7 @@ import * as C from '@/constants'
 import * as Common from './common'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
-import {
-  emojiSearch,
-  emojiDataToRenderableEmoji,
-  renderEmoji,
-  type EmojiData,
-  RPCToEmojiData,
-} from '@/util/emoji'
+import {type EmojiData, RPCToEmojiData, emojiData} from '@/common-adapters/emoji'
 
 export const transformer = (
   emoji: EmojiData,
@@ -33,7 +27,7 @@ const ItemRenderer = (p: Common.ItemRendererProps<EmojiData>) => {
       ])}
       gap="small"
     >
-      {renderEmoji({emoji: emojiDataToRenderableEmoji(item), showTooltip: false, size: 24})}
+      <Kb.Emoji emojiData={item} showTooltip={false} size={24} />
       <Kb.Text type="BodySmallSemibold">{item.short_name}</Kb.Text>
     </Kb.Box2>
   )
@@ -61,17 +55,17 @@ const useDataSource = (filter: string) => {
   }
 
   // prefill data with stock emoji
-  let emojiData: Array<EmojiData> = emojiSearch(filter, 50)
+  let results: Array<EmojiData> = emojiData.emojiSearch(filter, 50)
 
   if (userEmojis) {
     const userEmoji = userEmojis
       .filter(emoji => emoji.alias.toLowerCase().includes(filter))
       .map(emoji => RPCToEmojiData(emoji, false))
-    emojiData = userEmoji.sort((a, b) => a.short_name.localeCompare(b.short_name)).concat(emojiData)
+    results = userEmoji.sort((a, b) => a.short_name.localeCompare(b.short_name)).concat(results)
   }
 
   return {
-    items: emojiData,
+    items: results,
     loading: userEmojisLoading,
   }
 }

shared/chat/conversation/messages/emoji-row.tsx

@@ -4,7 +4,6 @@ import {useOrdinal} from './ids-context'
 import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import {EmojiPickerDesktop} from '@/chat/emoji-picker/container'
-import {renderEmoji, RPCUserReacjiToRenderableEmoji} from '@/util/emoji'
 
 type OwnProps = {
   className?: string
@@ -121,13 +120,14 @@ const HoverEmoji = (props: {emoji: T.RPCGen.UserReacji; onClick: () => void}) =>
       hoverColor={Kb.Styles.globalColors.transparent}
       style={styles.emojiBox}
     >
-      {renderEmoji({
-        emoji: RPCUserReacjiToRenderableEmoji(props.emoji, !hovering),
-        showTooltip: false,
-        size: hovering ? 22 : 18,
-        style: styles.hoverEmoji,
-        virtualText: true,
-      })}
+      <Kb.Emoji
+        userReacji={props.emoji}
+        noAnim={!hovering}
+        showTooltip={false}
+        size={hovering ? 22 : 18}
+        style={styles.hoverEmoji}
+        virtualText={true}
+      />
     </Kb.ClickableBox>
   )
 }

shared/chat/conversation/messages/message-popup/reactionitem.tsx

@@ -1,6 +1,5 @@
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
-import {renderEmoji, RPCUserReacjiToRenderableEmoji} from '@/util/emoji'
 
 type Props = {
   onHidden: () => void
@@ -26,7 +25,7 @@ const ReactionItem = (props: Props) => {
     <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
       {topReacjis.map((r, idx) => (
         <Kb.ClickableBox key={r.name || idx} onClick={() => onReact(r.name)} style={styles.clickableBox}>
-          {renderEmoji({emoji: RPCUserReacjiToRenderableEmoji(r, true), showTooltip: false, size: 28})}
+          <Kb.Emoji userReacji={r} noAnim={true} showTooltip={false} size={28} />
         </Kb.ClickableBox>
       ))}
       <Kb.ClickableBox onClick={showPicker} style={styles.clickableBox}>

shared/chat/conversation/messages/react-button.tsx

@@ -105,10 +105,15 @@ const ReactButtonContainer = React.memo(function ReactButtonContainer(p: OwnProp
 
 const markdownOverride: StyleOverride = Kb.Styles.isMobile
   ? {
-      customEmoji: {height: 24, width: 24},
-      emoji: {height: 21, lineHeight: 24},
-      emojiSize: {size: 22},
-      paragraph: {},
+      customEmoji: {
+        height: 24,
+        transform: [{translateY: C.isAndroid ? 0 : 3.5}],
+        width: 24,
+      },
+      emoji: {
+        lineHeight: C.isAndroid ? 26 : 28.5,
+      },
+      emojiSize: {size: 24},
     }
   : {
       customEmoji: {height: 18, width: 18},

shared/chat/conversation/messages/special-top-message.tsx

@@ -206,7 +206,7 @@ const SpecialTopMessage = React.memo(function SpecialTopMessage() {
       {allowDigging && loadMoreType === 'moreToLoad' && pendingState === 'done' && (
         <Kb.Box style={styles.more}>
           <Kb.Text type="BodyBig">
-            <Kb.Emoji size={16} emojiName=":moyai:" />
+            <Kb.NativeEmoji size={16} emojiName=":moyai:" />
           </Kb.Text>
           <Kb.Text type="BodySmallSemibold">Digging ancient messages...</Kb.Text>
         </Kb.Box>

shared/chat/emoji-picker/container.tsx

@@ -2,12 +2,11 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
-import * as Data from '@/util/emoji'
 import type {LayoutEvent} from '@/common-adapters/box'
 import startCase from 'lodash/startCase'
 import SkinTonePicker from './skin-tone-picker'
 import EmojiPicker, {getSkinToneModifierStrIfAvailable} from '.'
-import {emojiDataToRenderableEmoji, renderEmoji, type EmojiData, type RenderableEmoji} from '@/util/emoji'
+import {type EmojiData, type RenderableEmoji, emojiData} from '@/common-adapters/emoji'
 import {usePickerState, type PickKey} from './use-picker'
 import {Keyboard} from 'react-native'
 
@@ -180,7 +179,7 @@ export const EmojiPickerDesktop = (props: Props) => {
   const {onDidPick} = props
   const {filter, onChoose, setFilter: _setFilter, topReacjis} = useReacji(props)
   const {currentSkinTone, setSkinTone} = useSkinTone()
-  const [hoveredEmoji, setHoveredEmoji] = React.useState<EmojiData>(Data.defaultHoverEmoji)
+  const [hoveredEmoji, setHoveredEmoji] = React.useState<EmojiData>(emojiData.defaultHoverEmoji)
   const {waiting, customEmojiGroups} = useCustomReacji(props.onlyTeamCustomEmoji, props.disableCustomEmoji)
   const canManageEmoji = useCanManageEmoji()
   const navigateAppend = C.Chat.useChatNavigateAppend()
@@ -240,15 +239,13 @@ export const EmojiPickerDesktop = (props: Props) => {
           style={styles.footerContainer}
           gap="small"
         >
-          {renderEmoji({
-            emoji: emojiDataToRenderableEmoji(
-              hoveredEmoji,
-              getSkinToneModifierStrIfAvailable(hoveredEmoji, currentSkinTone),
-              currentSkinTone
-            ),
-            showTooltip: false,
-            size: 36,
-          })}
+          <Kb.Emoji
+            emojiData={hoveredEmoji}
+            skinToneModifier={getSkinToneModifierStrIfAvailable(hoveredEmoji, currentSkinTone)}
+            skinToneKey={currentSkinTone}
+            showTooltip={false}
+            size={36}
+          />
           {hoveredEmoji.teamname ? (
             <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne}>
               <Kb.Text type="BodyBig" lineClamp={1}>

shared/chat/emoji-picker/index.tsx

@@ -1,29 +1,16 @@
 import * as React from 'react'
 import type * as T from '@/constants/types'
 import * as C from '@/constants'
-import * as Data from '@/util/emoji'
 import * as Kb from '@/common-adapters'
 import chunk from 'lodash/chunk'
 import {
-  emojiDataToRenderableEmoji,
   getEmojiStr,
-  renderEmoji,
   type EmojiData,
   type RenderableEmoji,
   RPCToEmojiData,
-} from './../../util/emoji'
-
-// defer loading this until we need to, very expensive
-const _getData = () => {
-  const utilEmoji = require('@/util/emoji') as {
-    categories: typeof Data.categories
-    emojiSearch: typeof Data.emojiSearch
-    emojiNameMap: typeof Data.emojiNameMap
-    skinTones: typeof Data.skinTones
-  }
-  const {categories, emojiSearch, emojiNameMap, skinTones: emojiSkinTones} = utilEmoji
-  return {categories, emojiNameMap, emojiSearch, emojiSkinTones}
-}
+  emojiDataToRenderableEmoji,
+  emojiData,
+} from '@/common-adapters/emoji'
 
 const chunkEmojis = (emojis: Array<EmojiData>, emojisPerLine: number): Array<Row> =>
   chunk(emojis, emojisPerLine).map((c, idx) => ({
@@ -37,7 +24,7 @@ const chunkEmojis = (emojis: Array<EmojiData>, emojisPerLine: number): Array<Row
 const removeObsolete = (emojis: Array<EmojiData>) => emojis.filter(e => !e.obsoleted_by)
 
 const getEmojiSections = (emojisPerLine: number): Array<Section> =>
-  _getData().categories.map(
+  emojiData.categories.map(
     c =>
       ({
         data: chunkEmojis(removeObsolete(c.emojis), emojisPerLine),
@@ -51,11 +38,10 @@ const getFrequentSection = (
   customEmojiGroups: ReadonlyArray<T.RPCChat.EmojiGroup>,
   emojisPerLine: number
 ): Section => {
-  const {emojiNameMap} = _getData()
   const customEmojiIndex = getCustomEmojiIndex(customEmojiGroups)
   const emojis = topReacjis.reduce<Array<EmojiData>>((arr, top) => {
     const shortNameNoColons = top.name.replace(/:/g, '')
-    const emoji = emojiNameMap[shortNameNoColons] || customEmojiIndex.get(shortNameNoColons)
+    const emoji = emojiData.emojiNameMap[shortNameNoColons] || customEmojiIndex.get(shortNameNoColons)
     if (emoji) {
       arr.push(emoji)
     }
@@ -147,10 +133,12 @@ const getCustomEmojiIndex = (emojiGroups: ReadonlyArray<T.RPCChat.EmojiGroup>) =
 const emptyCustomEmojiIndex = {filter: () => [], get: () => undefined}
 
 const getResultFilter = (emojiGroups?: ReadonlyArray<T.RPCChat.EmojiGroup>) => {
-  const {emojiSearch} = _getData()
   const customEmojiIndex = emojiGroups ? getCustomEmojiIndex(emojiGroups) : emptyCustomEmojiIndex
   return (filter: string): Array<EmojiData> => {
-    return [...customEmojiIndex.filter(filter), ...removeObsolete(emojiSearch(filter, maxEmojiSearchResults))]
+    return [
+      ...customEmojiIndex.filter(filter),
+      ...removeObsolete(emojiData.emojiSearch(filter, maxEmojiSearchResults)),
+    ]
   }
 }
 
@@ -181,8 +169,7 @@ const getSectionsAndBookmarks = (
   }
 
   getEmojiSections(emojisPerLine).forEach(section => {
-    const cat = Data.categoryIcons as {[key: string]: Kb.IconType}
-    const categoryIcon = cat[section.title]
+    const categoryIcon = emojiData.categoryIcons[section.title] as Kb.IconType | undefined
     categoryIcon &&
       bookmarks.push({
         coveredSectionKeys: new Set([section.key]),
@@ -234,16 +221,26 @@ const EmojiPicker = React.memo(function EmojiPicker(props: Props) {
   const [activeSectionKey, setActiveSectionKey] = React.useState('')
   const getEmojiSingle = (emoji: EmojiData, skinTone?: T.Chat.EmojiSkinTone) => {
     const skinToneModifier = getSkinToneModifierStrIfAvailable(emoji, skinTone)
-    const renderable = emojiDataToRenderableEmoji(emoji, skinToneModifier, skinTone)
     return (
       <Kb.ClickableBox2
         className="emoji-picker-emoji-box"
-        onClick={() => props.onChoose(getEmojiStr(emoji, skinToneModifier), renderable)}
+        onClick={() => {
+          props.onChoose(
+            getEmojiStr(emoji, skinToneModifier),
+            emojiDataToRenderableEmoji(emoji, skinToneModifier, skinTone)
+          )
+        }}
         onMouseOver={props.onHover && (() => props.onHover?.(emoji))}
         style={styles.emoji}
         key={emoji.short_name}
       >
-        {renderEmoji({emoji: renderable, showTooltip: false, size: singleEmojiWidth})}
+        <Kb.Emoji
+          emojiData={emoji}
+          skinToneModifier={skinToneModifier}
+          skinToneKey={skinTone}
+          showTooltip={false}
+          size={singleEmojiWidth}
+        />
       </Kb.ClickableBox2>
     )
   }
@@ -409,8 +406,7 @@ const EmojiPicker = React.memo(function EmojiPicker(props: Props) {
 
 export const getSkinToneModifierStrIfAvailable = (emoji: EmojiData, skinTone?: T.Chat.EmojiSkinTone) => {
   if (skinTone && emoji.skin_variations?.[skinTone]) {
-    const {emojiSkinTones} = _getData()
-    const idx = emojiSkinTones.indexOf(skinTone)
+    const idx = emojiData.skinTones.indexOf(skinTone)
     return `:skin-tone-${idx + 1}:`
   }
   return undefined

shared/chat/emoji-picker/skin-tone-picker.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import * as Kb from './../../common-adapters'
-import * as T from './../../constants/types'
-import {skinTones} from './../../util/emoji'
+import * as Kb from '@/common-adapters'
+import * as T from '@/constants/types'
+import {emojiData} from '@/common-adapters/emoji'
 
 const circle = (skinTone: undefined | T.Chat.EmojiSkinTone, isExpanded: boolean, outerCircle: boolean) => {
   return (
@@ -25,10 +25,10 @@ type Props = {
 }
 
 const reorderedSkinTones = (currentSkinTone: Props['currentSkinTone']) => {
-  if (Kb.Styles.isMobile || !currentSkinTone) return skinTones
-  const idx = skinTones.indexOf(currentSkinTone)
-  if (idx === -1) return skinTones
-  const rest = [...skinTones]
+  if (Kb.Styles.isMobile || !currentSkinTone) return emojiData.skinTones
+  const idx = emojiData.skinTones.indexOf(currentSkinTone)
+  if (idx === -1) return emojiData.skinTones
+  const rest = [...emojiData.skinTones]
   rest.splice(idx, 1)
   return [currentSkinTone, ...rest]
 }

shared/chat/emoji-picker/use-picker.tsx

@@ -1,6 +1,6 @@
 import * as Z from '@/util/zustand'
 import type * as T from '@/constants/types'
-import type {RenderableEmoji} from '@/util/emoji'
+import type {RenderableEmoji} from '@/common-adapters/emoji'
 
 export type PickKey = 'addAlias' | 'chatInput' | 'reaction'
 type PickerValue = {