https://github.com/xiewang/react-native-emoticons

react native emoticons（表情）, including emoji😁
https://github.com/xiewang/react-native-emoticons

chat emoji emoticon emoticons keyboard react-native storage

Last synced: 2 months ago
JSON representation

react native emoticons（表情）, including emoji😁

• Host: GitHub
• URL: https://github.com/xiewang/react-native-emoticons
• Owner: xiewang
• License: mit
• Created: 2017-04-21T16:14:41.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-05-07T11:49:21.000Z (over 3 years ago)
• Last Synced: 2024-11-09T00:56:12.544Z (3 months ago)
• Topics: chat, emoji, emoticon, emoticons, keyboard, react-native, storage
• Language: JavaScript
• Homepage:
• Size: 11.4 MB
• Stars: 126
• Watchers: 7
• Forks: 74
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • Changelog: history.png
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Emoticons

react native emoticons component, including emoji

![emoticons](docs/emoticons.gif)

### latest screenshot sample

![emoticons](docs/sample2.png )

## Install

```js

npm install react-native-emoticons

```

## Usage

### UI Component

- step 1

	Import the component package.

	

	```js

	import Emoticons from 'react-native-emoticons';

	```

- step 2

	Write the component code in the proper place of your page render.

	

	```js

	

	```

	> **Tip:**  The attribute `onEmoticonPress ` can get the emoticos results like `{code:'😁', name: 'GRIMACING FACE'}`. The attribute `show ` will control that if the component is visible.  The attribute `onBackspacePress ` will add a function for backspace button. 

### props

| Prop | Type | Description | Required | Default |

|---|---|---|---|---|

|**`onEmoticonPress `**|`Function `| callback function when the emoticons is pressed |`Yes`|None|

|**`onBackspacePress `**|`Function `| callback function when the backspace button is pressed |`YES`|None|

|**`show `**|`Bool `| show the component |`YES`| false |

|**`concise `**|`Bool `| concise mod with less emoji |`No`| true |

|**`showHistoryBar `**|`Bool `| enable history function |`No`| true |

|**`showPlusBar `**|`Bool `| enable more emoticons function(is on developing, if you have interesting on this, welcome pull request.)|`No`| true |

|**`asyncRender `**|`Bool `| async render |`No`| false |

### API

Import

```js

import * as emoticons from 'react-native-emoticons';

```

1. stringify

	

	```js

	//Most database can't restore the emoji string😤,so we map 

	//them to common string.

	

	const string = emoticons.stringify('This is source emoji 😁');

	console.log(string);

	```

	```js

	//output

	'This is source emoji [GRIMACING FACE]'

	```

	

2. parse

	```js

	//If we want to show the emoji(fetch from database) in view page

	//we need parse the string

	

	const emoji = emoticons.parse('This is source emoji [GRIMACING FACE]');

	console.log(emoji);

	```

	```js

	//output

	'This is source emoji 😁'

	```

3. splitter

	```js

	//this api is for backspace function

	const emoji = emoticons.splitter('emoji😁');

	console.log(emoji);

	```

	```js

	//output

	['e','m','o','j','i','😁']

	```

## Further

	

###	Support custom emoticons like `weixin`