diff --git a/README.md b/README.md index 02d4e3d..9ac60dc 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,8 @@ export default function App() { | open | boolean | false | yes | Opens modal picker | | onClose | function | undefined | yes | Request close modal *runs when onEmojiSelected or backdrop pressed* | | emojiSize | number | 28 | no | Custom emoji size | +| enableRecentlyUsed | boolean | false | no | Enable recently used emojis in categories | +| categoryPosition | 'floating' \| 'top' \| 'bottom' | 'floating' | no | Specify category container position | | headerStyles | TextStyle | {} | no | Override category name styles | | knobStyles | ViewStyle | {} | no | Override knob styles | | containerStyles | ViewStyle | {} | no | Override container styles | @@ -60,7 +62,6 @@ export default function App() { | onCategoryChangeFailed | function | warn(info) | no | Callback on category change failed (info: {index, highestMeasuredFrameIndex, averageItemLength}) | | translation | CategoryTranslation | en | no | Translation object *see translation section* | | disabledCategory | CategoryTypes[] | [] | no | Hide categories by passing their slugs | -| categoryPosition | CategoryPosition | categoryPosition | no | Specify category container position | ## 📊 Comparison @@ -119,6 +120,8 @@ You can clone the repo and run `yarn example ios` or `yarn example android` to p ![Preview](/example/assets/static-modal-preview.jpg) ### [Static](/example/src/Static/Static.tsx) ![Preview](/example/assets/static-preview.jpg) +### [Recently used](/example/src/EnableRecently/EnableRecently.tsx) +![Preview](/example/assets/enable-recently-used-preview.jpg) ### [Categories Top](/example/src/TopCategory/TopCategory.tsx) ![Preview](/example/assets/categories-top-preview.jpg) ### [Categories Bottom](/example/src/BottomCategory/BottomCategory.tsx) diff --git a/example/assets/enable-recently-used-preview.jpg b/example/assets/enable-recently-used-preview.jpg new file mode 100644 index 0000000..b4461b9 Binary files /dev/null and b/example/assets/enable-recently-used-preview.jpg differ diff --git a/example/src/App.tsx b/example/src/App.tsx index 320eeab..673a137 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -9,6 +9,7 @@ import Translated from './Translated/Translated'; import DisabledCategories from './DisabledCategories/DisabledCategories'; import StaticModal from './StaticModal/StaticModal'; import Static from './Static/Static'; +import EnableRecently from './EnableRecently/EnableRecently'; import TopCategory from './TopCategory/TopCategory'; import BottomCategory from './BottomCategory/BottomCategory'; @@ -19,7 +20,10 @@ export default () => { + + + { /> - - ); diff --git a/example/src/EnableRecently/EnableRecently.tsx b/example/src/EnableRecently/EnableRecently.tsx new file mode 100644 index 0000000..6ab7d68 --- /dev/null +++ b/example/src/EnableRecently/EnableRecently.tsx @@ -0,0 +1,44 @@ +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 EnableRecently = () => { + const [result, setResult] = React.useState(); + const [isModalOpen, setIsModalOpen] = React.useState(false); + + const handlePick = (emoji: EmojiType) => { + console.log(emoji); + setResult(emoji.emoji); + setIsModalOpen((prev) => !prev); + }; + return ( + + Result: {result} + setIsModalOpen(true)}> + Open + + + setIsModalOpen(false)} + enableRecentlyUsed + /> + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + text: { + textAlign: 'center', + margin: 64, + fontSize: 18, + }, +}); + +export default EnableRecently; diff --git a/example/src/Examples/Examples.tsx b/example/src/Examples/Examples.tsx index 675a11a..f3af438 100644 --- a/example/src/Examples/Examples.tsx +++ b/example/src/Examples/Examples.tsx @@ -11,6 +11,7 @@ type RootStackParamList = { DisabledCategories: undefined; StaticModal: undefined; Static: undefined; + EnableRecently: undefined; TopCategory: undefined; BottomCategory: undefined; }; @@ -39,6 +40,10 @@ const Examples = ({ navigation }: Props) => { title="Static Component" onPress={() => navigation.navigate('Static')} /> +