feat: export emojis data (#142)

* feat: add emojisData export

* docs: add Emojis Data JSON section

* feat: allow to pass own set of emojis

* docs: add emojisByGroup prop description, modified emojiDataJson section

* fix: emojisByGroup types

* feat: made custom emojis optional props, used our emoji data as default

* feat: add customEmojisData example

* docs: add customEmojisData example section, updated modal.md

* chore: changed fn name in customEmojiData example

* docs: deleted unneccesary import from customEmojisData example

* chore: minor types and imports changes

* change: improve docs

* refactor: change emojisByGroup to emojisByCategory

* fix: typescript types in context

* fix: unused import in keyboard provider

---------

Co-authored-by: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>

docs/docs/api/emojisData.md

@@ -0,0 +1,32 @@
+---
+sidebar_position: 6
+title: Emojis Data
+---
+
+The library provides the ability to import a `.json` file containing all currently available emojis. Additionally, you can pass your own set of emojis, provided they follow our structure and types.
+
+To import the emojis data, use the following code:
+
+```ts
+import { emojisByCategory } from 'rn-emoji-keyboard'
+```
+
+Here is the EmojisData structure explained as Typescript code
+
+```ts
+type EmojiType = {
+  emoji: string // Visual representation of emoji
+  name: string
+  slug: string
+  unicode_version: string
+  toneEnabled: boolean
+  alreadySelected?: boolean
+}
+
+type EmojisByCategory = {
+  title: CategoryTypes
+  data: JsonEmoji[]
+}
+
+const emojisByCategory: EmojisByCategory[]
+```

docs/docs/api/modal.md

@@ -79,6 +79,20 @@ Look into [**React Native documentation**](https://reactnative.dev/docs/safearea
 
 <ApiTable typeVal='boolean' defaultVal='false'/>
 
+### `emojisByCategory`
+
+Set of emojis that can be displayed in the app. You can pass your own emojis set or use the one that we have prepared.
+
+:::info
+Read more about [**Emojis Data**](/docs/api/emojisData)
+:::
+
+```ts
+import { emojisByCategory } from 'rn-emoji-keyboard'
+```
+
+<ApiTable typeVal='EmojisByCategory[]' defaultVal="emojisByCategory"/>
+
 ### `emojiSize`
 
 Set size of the single emoji.

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

@@ -0,0 +1,44 @@
+---
+sidebar_position: 11
+title: Custom Emojis Data
+---
+
+:::info
+To preview app with this example, clone [**github repo**](https://github.com/TheWidlarzGroup/rn-emoji-keyboard.git) and run `yarn example ios` or `yarn example android`.
+:::
+
+### Usage
+
+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
+import EmojiPicker, { emojisByCategory } from 'rn-emoji-keyboard'
+import type { EmojisByCategory } from 'src/types'
+
+const getCustomEmojis = () => {
+  const newEmojiSet: EmojisByCategory[] = []
+  for (const [, value] of Object.entries(emojisByCategory)) {
+    const newData = value.data.filter((emoji) => parseFloat(emoji.v) === 11)
+    newEmojiSet.push({
+      title: value.title,
+      data: newData,
+    })
+  }
+  return newEmojiSet
+}
+
+const ExampleComponent = () => {
+  // ...
+
+  return (
+    <EmojiPicker
+      open={isOpen}
+      onClose={handleOnClose}
+      onEmojiSelected={handleOnEmojiSelected}
+      emojisByCategory={getCustomEmojis()}
+    />
+  )
+}
+```
+
+![Preview](../../../assets/img/custom-emojis-data.png)

example/src/App.tsx

@@ -17,6 +17,7 @@ import { useDebugMenu } from './useDebugMenu'
 import EnableRecentlyPersistence from './EnableRecently/EnableRecently-persistence'
 import CategoryChangeGesture from './Basic/CategoryChangeGesture'
 import SelectedEmojis from './SelectedEmojis/SelectedEmojis'
+import CustomEmojisData from './CustomEmojisData/CustomEmojisData'
 
 const Stack = createStackNavigator<RootStackParamList>()
 export default () => {
@@ -39,6 +40,7 @@ export default () => {
         <Stack.Screen name="StaticModal" component={StaticModal} />
         <Stack.Screen name="Static" component={Static} />
         <Stack.Screen name="SelectedEmojis" component={SelectedEmojis} />
+        <Stack.Screen name="CustomEmojisData" component={CustomEmojisData} />
       </Stack.Navigator>
     </NavigationContainer>
   )

example/src/Basic/Basic.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { StyleSheet, Text, TouchableOpacity } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import EmojiPicker from 'rn-emoji-keyboard'
+
 import type { EmojiType } from 'src/types'
 
 const Basic = () => {

example/src/CustomEmojisData/CustomEmojisData.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker, { emojisByCategory } from 'rn-emoji-keyboard'
+
+import type { EmojiType, EmojisByCategory } from 'src/types'
+
+const getCustomEmojis = () => {
+  const newEmojiSet: EmojisByCategory[] = []
+  for (const [, value] of Object.entries(emojisByCategory)) {
+    const newData = value.data.filter((emoji) => parseFloat(emoji.v) === 11)
+    newEmojiSet.push({
+      title: value.title,
+      data: newData,
+    })
+  }
+  return newEmojiSet
+}
+
+const CustomEmojisData = () => {
+  const [result, setResult] = React.useState<string>()
+  const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
+
+  const handlePick = (emoji: EmojiType) => {
+    console.log(emoji)
+    setResult(emoji.emoji)
+    setIsModalOpen((prev) => !prev)
+  }
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.text}>Result: {result}</Text>
+      <TouchableOpacity onPress={() => setIsModalOpen(true)}>
+        <Text style={styles.text}>Open</Text>
+      </TouchableOpacity>
+
+      <EmojiPicker
+        onEmojiSelected={handlePick}
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        emojisByCategory={getCustomEmojis()}
+      />
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  text: {
+    textAlign: 'center',
+    margin: 64,
+    fontSize: 18,
+  },
+})
+
+export default CustomEmojisData

example/src/Examples/Examples.tsx

@@ -18,6 +18,7 @@ export type RootStackParamList = {
   BottomCategory: undefined
   SearchBar: undefined
   SelectedEmojis: undefined
+  CustomEmojisData: undefined
 }
 
 type Props = StackScreenProps<RootStackParamList, 'Examples'>
@@ -54,6 +55,10 @@ const Examples = ({ navigation }: Props) => {
         <Button title="Category Bottom" onPress={() => navigation.navigate('BottomCategory')} />
         <Button title="Search Bar" onPress={() => navigation.navigate('SearchBar')} />
         <Button title="Selected Emojis" onPress={() => navigation.navigate('SelectedEmojis')} />
+        <Button
+          title="Custom Emojis Data"
+          onPress={() => navigation.navigate('CustomEmojisData')}
+        />
       </View>
     </SafeAreaView>
   )

example/src/Static/Static.tsx

@@ -10,6 +10,7 @@ const Static = () => {
   const handlePick = (emoji: EmojiType) => {
     setResult(emoji.emoji)
   }
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.container}>

src/contexts/KeyboardContext.tsx

@@ -13,6 +13,7 @@ import {
   CATEGORIES,
 } from '../types'
 import type { RecursivePartial } from '../utils/deepMerge'
+import emojisByCategory from '../assets/emojis.json'
 
 export type OnEmojiSelected = (emoji: EmojiType) => void
 
@@ -85,6 +86,7 @@ export type KeyboardProps = {
   enableCategoryChangeAnimation?: boolean
   selectedEmojis?: string[] | false
   enableCategoryChangeGesture?: boolean
+  emojisByCategory?: EmojisByCategory[]
 }
 export type ContextValues = {
   activeCategoryIndex: number
@@ -166,6 +168,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> & { theme: Theme; s
   enableCategoryChangeAnimation: true,
   selectedEmojis: false,
   enableCategoryChangeGesture: true,
+  emojisByCategory: emojisByCategory as EmojisByCategory[],
 }
 
 export const defaultKeyboardValues: ContextValues = {

src/contexts/KeyboardProvider.tsx

@@ -4,13 +4,11 @@ import {
   KeyboardProps,
   ContextValues,
   KeyboardContext,
-  OnEmojiSelected,
   defaultKeyboardContext,
   defaultKeyboardValues,
   defaultTheme,
   emptyStyles,
 } from './KeyboardContext'
-import emojisByGroup from '../assets/emojis.json'
 import { useKeyboardStore } from '../store/useKeyboardStore'
 import type { CategoryTypes, EmojisByCategory, JsonEmoji, EmojiTonesData } from '../types'
 import {
@@ -23,10 +21,10 @@ import {
 } from '../utils/skinToneSelectorUtils'
 import { deepMerge } from '../utils/deepMerge'
 
-type ProviderProps = Partial<KeyboardProps> & {
-  children: React.ReactNode
-  onEmojiSelected: OnEmojiSelected
-}
+type ProviderProps = Partial<KeyboardProps> &
+  Pick<KeyboardProps, 'onEmojiSelected'> & {
+    children: React.ReactNode
+  }
 
 export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
   const { width } = useWindowDimensions()
@@ -114,7 +112,8 @@ export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
   }, [props.open])
 
   const renderList = React.useMemo(() => {
-    let data = emojisByGroup.filter((category) => {
+    const emojisByCategory = props.emojisByCategory || defaultKeyboardContext.emojisByCategory
+    let data = emojisByCategory.filter((category) => {
       const title = category.title as CategoryTypes
       if (props.disabledCategories) return !props.disabledCategories.includes(title)
       return true
@@ -128,7 +127,7 @@ export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
     if (props.enableSearchBar) {
       data.push({
         title: 'search' as CategoryTypes,
-        data: emojisByGroup
+        data: emojisByCategory
           .map((group) => group.data)
           .flat()
           .filter((emoji) => {
@@ -156,6 +155,7 @@ export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
     props.enableSearchBar,
     props.categoryOrder,
     props.disabledCategories,
+    props.emojisByCategory,
     searchPhrase,
   ])
 

src/index.tsx

@@ -19,9 +19,12 @@ import tr from './translation/tr'
 import no from './translation/no'
 import ro from './translation/ro'
 import np from './translation/np'
+import EmojisData from './assets/emojis.json'
+import type { EmojisByCategory } from './types'
 
 export { EmojiKeyboard }
 export { useRecentPicksPersistence }
 export { en, pl, ko, it, fr, id, es, de, pt, ru, ua, vi, cs, ja, tr, no, ro, np }
+export const emojisByCategory = EmojisData as EmojisByCategory[]
 
 export default EmojiPicker