React Native Emoji Board

React Native Emoji Board is a customizable component similar to native keyboard but only with emoji for both iOS and Android. You can use this component as a keyboard input or emoji picker.

Installation

1. yarn add react-native-emoji-board
2. yarn add react-native-vector-icons if you don't have it
3. yarn add @react-native-community/viewpager if you don't have it

Linking

>= 0.60 Autolinking will just do the job.

< 0.60

react-native link react-native-vector-icons

react-native link @react-native-community/viewpager

Props

Required Props

Prop	Description	type
onClick	Call back function when you clciked on emoji	function

Optional Props

Prop	Description	type	default value
showBoard	Show or hide Emoji board with animation	boolean	false
customEmoji	See Custom Emoji	array	[]
categories	Default full categories from emoji-datasource	array	See defaultProps.categories
blackList	Exclude emojis based on short_name	array	[]
numRows	Number of emoji rows to display per slide	number	8
numCols	Number of emoji columns to display per slide	number	5
emojiSize	Default emoji size	number	24
tabBarPosition	Default category nav position	string	'bottom'
hideBackSpace	Show or hide backspace icon	boolean	false
categoryDefautColor	Default category icon color	string	'#aaa'
categoryHighlightColor	Default category icon highlight color	string	'#000'
categoryIconSize	Default category icon size	string	20
containerStyle	Main container style, same as Layout Props	object	{}
tabBarStyle	Category bar style, same as Layout Props	object	{}
labelStyle	Category label style, same as Text Props	object	{}
onRemove	Call back function when backspace get clicked	function	null

If you want to support less category or modify the icon, here is the categories props:

Prop	Description	type
name	Category name	string
iconType	Only support MaterialCommunityIcons and FontAwesome, you can use defined iconType	string
icon	Icon/Font name, you can find list from here	string

Example Code

import EmojiBoard from 'react-native-emoji-board'

const App: () => React$Node = () => {
    const [show, setShow] = useState(false);
    const onClick = emoji => {
        console.log(emoji);
    };

    return (
        <>
            <StatusBar barStyle="dark-content" />
            <TouchableOpacity onPress={() => setShow(!show)}>
                <Text>click here</Text>
            </TouchableOpacity>
            <EmojiBoard showBoard={show} onClick={onClick} />
        </>
    );
};

Custom Emojis

Example:

const customEmojis = [
    {
        code: '🎅🏼',
        img: 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/237/father-christmas_1f385.png',
        name: 'santa',
        category: 'Smileys & Emotion',
        sort_order: 1,
        skins: [
            {
                img: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
                name: 'octocat',
            }
        ]
        
    }
]

Prop	Description	type
code	Native emoji(optional, fallback to image)	string
img	If you would like to have custom image instead, don't set code	string
name	Emoji/image name	string
category	Emoji category, need to match with what you have in categories props	string
sort_order	Sort order	number
skins	Skin support, same props with above	array

Credit

Inspired by xiewang/react-native-emoticons