Add slack likes custom emotes

.nvmrc

@@ -1 +1 @@
-16.18.1
+20.17.0

.prettierignore

@@ -1,3 +1,3 @@
 # readme
 
-README.md
+README.md

docs/docs/api/emojisData.md

@@ -14,15 +14,25 @@ import { emojisByCategory } from 'rn-emoji-keyboard'
 Here is the EmojisData structure explained as Typescript code
 
 ```ts
-type EmojiType = {
-  emoji: string // Visual representation of emoji
+
+export type EmojiTypeBase = {
   name: string
   slug: string
-  unicode_version: string
-  toneEnabled: boolean
   alreadySelected?: boolean
 }
 
+export type UnicodeEmojiType = EmojiTypeBase & {
+  emoji: string // Visual representation of emoji
+  toneEnabled: boolean
+  unicode_version: string
+}
+
+export type UriEmojiType = EmojiTypeBase & {
+  uri: string // Distant URI / base64 / Image.resolveAssetSource(require('asset/path/emote.ext').uri
+}
+
+export type EmojiType = UnicodeEmojiType | UriEmojiType
+
 type EmojisByCategory = {
   title: CategoryTypes
   data: JsonEmoji[]

docs/docs/documentation/Examples/emojis-data.md

@@ -11,19 +11,48 @@ To preview app with this example, clone [**github repo**](https://github.com/The
 
 It's possible to pass your own set of emojis. You have to keep in mind that types and category titles must match the ones that we are using. In the example you can see custom emojis set that contains only emojis with unicode version === 11.
 
-```jsx
+Passing your set of emojis allows you to support translated keywords, names and custom emojis
+
+```tsx
 import EmojiPicker, { emojisByCategory } from 'rn-emoji-keyboard'
+import { isUnicodeEmoji } from '../../../src/utils/parseEmoji'
 import type { EmojisByCategory } from 'src/types'
+import { Image } from 'react-native'
 
 const getCustomEmojis = () => {
   const newEmojiSet: EmojisByCategory[] = []
+
+  // Filter in categories, emojis version equal to unicode 11
   for (const [, value] of Object.entries(emojisByCategory)) {
-    const newData = value.data.filter((emoji) => parseFloat(emoji.v) === 11)
+    const newData = value.data.filter(
+      (emoji) => isUnicodeEmoji(emoji) && parseFloat(emoji.v) === 11,
+    )
     newEmojiSet.push({
       title: value.title,
       data: newData,
     })
   }
+
+  // Add in custom category URI sourced emojis
+  // Can be either a distant https:// or a base64 formatted image or a resolved image asset
+  const customCategoryIndex = emojisByCategory.findIndex(({ title }) => title === 'custom')
+  newEmojiSet[customCategoryIndex]!.data = [
+    {
+      uri: Image.resolveAssetSource(require('example/assets/custom/shhhh.webp')).uri,
+      keywords: ['shhhh', 'face'],
+      name: 'shhhh',
+    },
+    {
+      uri: Image.resolveAssetSource(require('example/assets/custom/silly.webp')).uri,
+      keywords: ['silly', 'face'],
+      name: 'silly',
+    },
+    {
+      uri: Image.resolveAssetSource(require('example/assets/custom/woah.webp')).uri,
+      keywords: ['woaah', 'face'],
+      name: 'woaah',
+    },
+  ]
   return newEmojiSet
 }
 

example/app/(examples)/basic.tsx

@@ -1,20 +1,20 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
 import React from 'react'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
+import { Result } from 'example/src/components/Result'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/category-bottom.tsx

@@ -1,20 +1,20 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
+import { Result } from 'example/src/components/Result'
 import React from 'react'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/category-top.tsx

@@ -1,20 +1,20 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
+import { Result } from 'example/src/components/Result'
 import React from 'react'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/custom-buttons.tsx

@@ -1,30 +1,30 @@
 import { Button } from 'example/src/components/Button'
 import React from 'react'
-import { Results } from 'example/src/components/Results'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
 import { DeleteButton } from '../../../src/components/DeleteButton'
+import { Results } from '../../src/components/Results'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [results, setResults] = React.useState<EmojiType[]>([])
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResults([...results, emoji])
     setIsModalOpen((prev) => !prev)
   }
 
   const deleteLastEmoji = () => {
-    if (result) {
-      let arrayFromString = Array.from(result)
+    if (results?.length) {
+      let arrayFromString = Array.from(results)
       arrayFromString.pop()
-      setResult(arrayFromString.join(''))
+      setResults(arrayFromString)
     }
   }
 
   return (
     <>
-      <Results label={result} />
+      {results?.length && <Results emojis={results} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/dark.tsx

@@ -1,20 +1,20 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
 import React from 'react'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
+import { Result } from '../../src/components/Result'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/disabled-categories.tsx

@@ -1,20 +1,20 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
+import { Result } from 'example/src/components/Result'
 import React from 'react'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/emoji-data.tsx

@@ -1,36 +1,60 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
 import React from 'react'
 import EmojiPicker, {
   emojisByCategory,
-  type EmojiType,
   type EmojisByCategory,
+  type EmojiType,
 } from 'rn-emoji-keyboard'
+import { Result } from '../../src/components/Result'
+import { Image } from 'react-native'
+import { isUnicodeEmoji } from '../../../src/utils/typeguards'
 
 const getCustomEmojis = () => {
   const newEmojiSet: EmojisByCategory[] = []
+
   for (const [, value] of Object.entries(emojisByCategory)) {
-    const newData = value.data.filter((emoji) => parseFloat(emoji.v) === 11)
+    const newData = value.data.filter(
+      (emoji) => isUnicodeEmoji(emoji) && parseFloat(emoji.v) === 11,
+    )
     newEmojiSet.push({
       title: value.title,
       data: newData,
     })
   }
+
+  const customCategoryIndex = emojisByCategory.findIndex(({ title }) => title === 'custom')
+  newEmojiSet[customCategoryIndex]!.data = [
+    {
+      uri: Image.resolveAssetSource(require('example/assets/custom/shhhh.webp')).uri,
+      keywords: ['shhhh', 'face'],
+      name: 'shhhh',
+    },
+    {
+      uri: Image.resolveAssetSource(require('example/assets/custom/silly.webp')).uri,
+      keywords: ['silly', 'face'],
+      name: 'silly',
+    },
+    {
+      uri: Image.resolveAssetSource(require('example/assets/custom/woah.webp')).uri,
+      keywords: ['woaah', 'face'],
+      name: 'woaah',
+    },
+  ]
   return newEmojiSet
 }
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/enable-recently.tsx

@@ -1,20 +1,20 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
 import React from 'react'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
+import { Result } from 'example/src/components/Result'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker

example/app/(examples)/search.tsx

@@ -1,20 +1,20 @@
 import { Button } from 'example/src/components/Button'
-import { Results } from 'example/src/components/Results'
+import { Result } from 'example/src/components/Result'
 import React from 'react'
 import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
 
 export default function () {
-  const [result, setResult] = React.useState<string>()
+  const [result, setResult] = React.useState<EmojiType>()
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
 
   const handlePick = (emoji: EmojiType) => {
     console.log(emoji)
-    setResult(emoji.emoji)
+    setResult(emoji)
     setIsModalOpen((prev) => !prev)
   }
   return (
     <>
-      <Results label={result} />
+      {result && <Result emoji={result} />}
       <Button onPress={() => setIsModalOpen(true)} label="Open" />
 
       <EmojiPicker