2021-07-03 17:51:30 +00:00
# react-native-emoji-keyboard
.
## Usage
```js
2021-07-08 13:10:57 +00:00
import EmojiPicker from '{package-name}';
export default function App() {
const [isOpen, setIsOpen] = React.useState< boolean > (false);
2021-07-03 17:51:30 +00:00
2021-07-08 13:10:57 +00:00
const handlePick = (emojiObject: EmojiType) => {
console.log(emojiObject);
/* example emojiObject = { {
"emoji": "❤️",
"name": "red heart",
"slug": "red_heart",
"skin_tone_support": false,
"unicode_version": "0.6",
"emoji_version": "0.6"
},
*/
};
2021-07-03 17:51:30 +00:00
2021-07-08 13:10:57 +00:00
return (
< EmojiPicker
onEmojiSelected={handleSelect}
open={isOpen}
onClose={() => setIsOpen(false)} />
)
}
2021-07-03 17:51:30 +00:00
```
2021-07-08 13:10:57 +00:00
## Installation
```sh
yarn add {package-name}
```
2021-07-03 17:51:30 +00:00
2021-07-08 13:10:57 +00:00
or
2021-07-03 17:51:30 +00:00
2021-07-08 13:10:57 +00:00
```sh
npm install {package-name}
```
## Full Example
```js
TODO
```
## Accepted props (current implemented)
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
| onEmojiSelected | function | undefined | yes | Callback on emoji selected |
| 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 |
| headerStyles | TextStyle | {} | no | Override category name styles |
| knobStyles | ViewStyle | {} | no | Override knob styles |
| containerStyles | ViewStyle | {} | no | Override container styles |
| hideHeader | boolean | false | no | Hide category names |
| expandable | boolean | true | no | Show knob and enable expand on swipe up |
2021-07-10 10:39:52 +00:00
| defaultHeight | number \| string | "40%" | no | Specify collapsed container height (number is points, string is a percentage of the screen height) |
| expandedHeight | number \| string | "80%" | no | Specify expanded container height (number is points, string is a percentage of the screen height) _works only if expandable is true_ |
2021-07-08 13:10:57 +00:00
| backdropColor | string | "#00000055" | no | Change backdrop color and alpha |
2021-07-10 10:05:18 +00:00
| categoryColor | string | "#000000" | no | Change category item color |
| activeCategoryColor | string | "#005b96" | no | Change active category item color |
| categoryContainerColor | string | "#e3dbcd" | no | Change category container color |
2021-07-10 13:42:55 +00:00
| onCategoryChangeFailed | function | warn(info) | no | Callback on category change failed (info: {index, highestMeasuredFrameIndex, averageItemLength}) |
2021-07-03 17:51:30 +00:00
## License
2021-07-08 13:10:57 +00:00
**MIT**
< br / > < br / > < br / >
## TODO
categories => Specify displayed categories
2021-07-03 17:51:30 +00:00
2021-07-10 10:05:18 +00:00
language => Use translation