Implement demo with emoji picker

package.json

@@ -28,6 +28,7 @@
     "@tamagui/vite-plugin": "1.36.4",
     "@types/react": "18",
     "@types/react-dom": "18",
+    "emoji-picker-react": "^4.4.11",
     "expo-modules-core": "^1.5.9",
     "react": "18",
     "react-color": "^2.19.3",

src/components/General/EmojiPicker.tsx

@@ -0,0 +1,67 @@
+import { Text } from '@status-im/components'
+import EmojiPicker, {
+  EmojiStyle,
+  Theme,
+  EmojiClickData,
+  Emoji,
+  SuggestionMode,
+  Categories,
+} from 'emoji-picker-react'
+import { useState } from 'react'
+import { Stack, XStack } from 'tamagui'
+
+function EmojiPickerDialog() {
+  const [selectedEmoji, setSelectedEmoji] = useState<string>('')
+
+  function onClick(emojiData: EmojiClickData) {
+    setSelectedEmoji(emojiData.unified)
+  }
+
+  return (
+    <Stack>
+      <Text size={27}>Emoji Picker Demo</Text>
+      <XStack>
+        Your selected Emoji is:
+        {selectedEmoji ? (
+          <Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.APPLE} size={22} />
+        ) : null}
+      </XStack>
+
+      <EmojiPicker
+        onEmojiClick={onClick}
+        autoFocusSearch={false}
+        theme={Theme.AUTO}
+        height={350}
+        width="100%"
+        emojiVersion="1"
+        lazyLoadEmojis={false}
+        previewConfig={{ showPreview: false }}
+        suggestedEmojisMode={SuggestionMode.RECENT}
+        skinTonesDisabled
+        searchPlaceHolder="Search emojis"
+        emojiStyle={EmojiStyle.FACEBOOK}
+        categories={[
+          {
+            name: 'People',
+            category: Categories.SMILEYS_PEOPLE,
+          },
+          { name: 'Animals and Nature', category: Categories.ANIMALS_NATURE },
+          {
+            name: 'Fun and Games',
+            category: Categories.ACTIVITIES,
+          },
+          {
+            name: 'Flags',
+            category: Categories.FLAGS,
+          },
+          {
+            name: 'Yum Yum',
+            category: Categories.FOOD_DRINK,
+          },
+          { name: 'Objects', category: Categories.OBJECTS },
+        ]}
+      />
+    </Stack>
+  )
+}
+export default EmojiPickerDialog

src/pages/LandingPage/LandingPage.tsx

@@ -6,6 +6,7 @@ import { Button as StatusButton } from '@status-im/components'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import { XStack, YStack } from 'tamagui'
 import { NodeIcon } from '@status-im/icons'
+import EmojiPickerDialog from '../../components/General/EmojiPicker'
 
 function LandingPage() {
   return (
@@ -24,6 +25,7 @@ function LandingPage() {
               <StatusButton icon={<NodeIcon size={20} />}>Get Started</StatusButton>
             </XStack>
           </YStack>
+          <EmojiPickerDialog />
         </div>
       </PageWrapperShadow>
       <QuickStartBar />

yarn.lock

@@ -8588,6 +8588,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "clsx@npm:1.2.1"
+  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -9537,6 +9544,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-picker-react@npm:^4.4.11":
+  version: 4.4.11
+  resolution: "emoji-picker-react@npm:4.4.11"
+  dependencies:
+    clsx: ^1.2.1
+  peerDependencies:
+    react: ">=16"
+  checksum: 69ec9468996a5b0a277fd7821156695af7d097f5f4d6da7c4286181bce5edc36e888f52be4b22f342a84bc9b99e7f71ee69e9079a69f0c58404aeccba8c85ab8
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -13842,6 +13860,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^6.0.0
     "@typescript-eslint/parser": ^6.0.0
     "@vitejs/plugin-react": ^4.0.3
+    emoji-picker-react: ^4.4.11
     eslint: ^8.45.0
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-react-refresh: ^0.4.3