Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature]Add includeOnlySubsets prop to enable emojis filtering by Unicode version #31

Closed
wants to merge 1 commit into from
Closed

[Feature]Add includeOnlySubsets prop to enable emojis filtering by Unicode version #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ npx babel-node scripts/compile.js
| `defaultFrequentlyUsedEmoji` | An array of keys for emojis that will always render in the frequently used category | Array(string) | [] |
| `resetSearch` | Pass this in if you want to clear the the search | boolean | false |
| `loggingFunction` | Logging function to be called when applicable.\* | function | none |
| `includeOnlySubsets` | Limit displayed emojis to only passed subsets of Unicode versions like so `['6.0']`. | Array(string) | [] |
| `verboseLoggingFunction` | Same as loggingFunction but also provides strategy used to determine failed search | boolean | false |

> \* When the search function yields this function is called. Additionally when the user clears the query box this function is called with the previous longest query since the last time the query box was empty. By default the function is called with one parameter, a string representing the query. If the verbose logging function parameter is set to true the function is called with a second parameter that is a string specifying why the function was called (either 'emptySearchResult' or 'longestPreviousQuery').
Expand Down Expand Up @@ -88,3 +89,15 @@ Finally compile the data file that used in the keyboard.
```shell
node-babel ./scripts/compile.js
```

## Missing Emojis on some devices

So why Emojis are displayed as `X` / other characters insetad of actual Emojis for some of your users?
That is because this library renders Emojis based on Font and Font need to support Emoji character in order to render it. And those fonts are updated with every system release, but because there is a lot of Android device manufacturers who are actually using Android as a base to come up with their own UI layer then it is harder for them to keep up with system updates.
You can read more about it here [Emojipedia article link](https://blog.emojipedia.org/androids-emoji-problem/)

So what can you do?
Apps such as `Slack` / `WhatsApp` are actually providing Emojis as little images so that they can be render regardless of operating system on mobile phone. The problem in `React-Native` is that there is no support for placing images in `Input` element at time of writing this.
Other solution is to limit number of possible emojis to most basic ones which are supported on most devices. Choosing emojis from `Unicode 6.0` seems like solid solution: [Unicode 6.0 Emojis List](https://emojipedia.org/unicode-6.0/) - you get tons of Emojis that are most likely to be correctly rendered across most of the devices.

In `React-Native-Emoji-Input` you can limit emojis displayed by using `includeOnlySubsets` prop and passing array of Unicode versions like so: `includeOnlySubsets={['6.0', '6.1']}` -> this will render only emojis from Unicode 6.0 and Unicode 6.1 in input.
17 changes: 13 additions & 4 deletions example/src/EmojiInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,14 @@ class EmojiInput extends React.PureComponent {
let dataProvider = new DataProvider((e1, e2) => {
return e1.char !== e2.char;
});

this.emojisFilteredBySubsets =
this.props.includeOnlySubsets.length === 0
? emoji
: _.pickBy(
emoji,
value =>
this.props.includeOnlySubsets.indexOf(value.lib.added_in) !== -1
);
this.emoji = [];
let categoryIndexMap = _(category)
.map((v, idx) => ({ ...v, idx }))
Expand All @@ -298,7 +305,7 @@ class EmojiInput extends React.PureComponent {
.map((v, k) => [
{ char: category[k].key, categoryMarker: true, ...category[k] }
]);
_(emoji)
_(this.emojisFilteredBySubsets)
.values()
.each(e => {
if (_.has(categoryIndexMap, e.category)) {
Expand Down Expand Up @@ -633,7 +640,8 @@ EmojiInput.defaultProps = {
},
emojiFontSize: 40,
categoryFontSize: 20,
resetSearch: false
resetSearch: false,
includeOnlySubsets: []
};

EmojiInput.propTypes = {
Expand All @@ -657,7 +665,8 @@ EmojiInput.propTypes = {
enableFrequentlyUsedEmoji: PropTypes.bool,
numFrequentlyUsedEmoji: PropTypes.number,
defaultFrequentlyUsedEmoji: PropTypes.arrayOf(PropTypes.string),
resetSearch: PropTypes.bool
resetSearch: PropTypes.bool,
includeOnlySubsets: PropTypes.arrayOf(PropTypes.string)
};

const styles = {
Expand Down
17 changes: 13 additions & 4 deletions src/EmojiInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,14 @@ class EmojiInput extends React.PureComponent {
let dataProvider = new DataProvider((e1, e2) => {
return e1.char !== e2.char;
});

this.emojisFilteredBySubsets =
this.props.includeOnlySubsets.length === 0
? emoji
: _.pickBy(
emoji,
value =>
this.props.includeOnlySubsets.indexOf(value.lib.added_in) !== -1
);
this.emoji = [];
let categoryIndexMap = _(category)
.map((v, idx) => ({ ...v, idx }))
Expand All @@ -298,7 +305,7 @@ class EmojiInput extends React.PureComponent {
.map((v, k) => [
{ char: category[k].key, categoryMarker: true, ...category[k] }
]);
_(emoji)
_(this.emojisFilteredBySubsets)
.values()
.each(e => {
if (_.has(categoryIndexMap, e.category)) {
Expand Down Expand Up @@ -633,7 +640,8 @@ EmojiInput.defaultProps = {
},
emojiFontSize: 40,
categoryFontSize: 20,
resetSearch: false
resetSearch: false,
includeOnlySubsets: []
};

EmojiInput.propTypes = {
Expand All @@ -657,7 +665,8 @@ EmojiInput.propTypes = {
enableFrequentlyUsedEmoji: PropTypes.bool,
numFrequentlyUsedEmoji: PropTypes.number,
defaultFrequentlyUsedEmoji: PropTypes.arrayOf(PropTypes.string),
resetSearch: PropTypes.bool
resetSearch: PropTypes.bool,
includeOnlySubsets: PropTypes.arrayOf(PropTypes.string)
};

const styles = {
Expand Down