ericpkerr / react-native-emoji Goto Github PK

☕Emoji component for React Native

License: MIT License

JavaScript 100.00%

react-native-emoji's Introduction

React Native Emoji

Emoji as React Native component

<Emoji name="coffee" style={{fontSize: 50}} />

Installation

Install package via npm:

npm install --save react-native-emoji

Require in your project

import Emoji from 'react-native-emoji';

Component properties

name (String) - Emoji's name (full list)
Note that dashes should be replaced with underscores, e.g. raising-hand becomes raising_hand.
All supported <Text /> properties, like style.

Credits

Based on node-emoji. Originally maintained by @jorilallo.

react-native-emoji's People

Contributors

Stargazers

Watchers

Forkers

mwiley getnashty javiercr markgaucher alwx peterkow diogopalhais sherwinterunez sibelius daz2345 jardenlau jacenko jiexishede shadowcz007 asplogic alihamza kerb-technologies laroinc patlux urska19 reggie3 xuanhescript amurmurmur gouravd 2534290808 rgommezz ardentlabs davidpaulsson amitstockpile stefen compojoom lhwebdevlop thiagoamc-zz dovandu9x01 eveningkid thepembeweb c0degeass sayyidisal alexkuttig soheilhbr trpgengine gencer timvanderweijde da314pc r26d a-tokyo gobhi devils-own mrondin1 taylordale nareshpalle9 farmerjoeorg web-crazy luluhoc devsales

react-native-emoji's Issues

how to choose different emojis of same type?

So the list has like 4 to 5 different emojis of same name. for example writing "rage" only gives me the first emoji which is the simple one. How can I get the other rage emojis?

Emoji list returns 403

The emoji list in the readme now returns a 403:

http://unicodey.com/emoji-data/table.htm

Question about cross platform emojis

Hey there,

I'm wondering if the emojis are going to be displayed the same on both iOS/Android or will they fall back to the emoji provided in the respective platform?

How do we pick skin color?

As you know, person emojis have skin color option. I would like to use certain emojis with skin color option. Is that available? If not, would you consider adding that feature?

Some emojis are not supported by shortname

Update npm package

PR #1 addressed the issue of the missing new emojis, such as flag-br, flag-ar and scales; however, as the package has not been republished to npm, users still end up getting the outdated version.

The fix would simply involve running npm version patch followed by npm publish by anyone with access to the package in npm (I'm assuming only @jorilallo).

Not working on Android

Trying to get it to work with android but I just get a blank space. Is this supposed to support both platforms?

Svg Text support?

Thank you for sharing this!

We needed to use an emoji inside an SVG and Android was not positioning the emoji correctly.

I think the fix might be something like:

'use strict';

import React, { PureComponent } from 'react';
import { Text } from 'react-native';
import Svg from 'react-native-svg';
import PropTypes from 'prop-types';
import nodeEmoji from 'node-emoji';

const SvgText = Svg.Text;

export default class Emoji extends PureComponent {
  static propTypes = {
    name: PropTypes.string.isRequired,
    svg: PropTypes.bool,
    ...Text.propTypes
  };

  render() {
    const { name, svg, ...props } = this.props;
    const emoji = nodeEmoji.get(name);
    if (!svg) {
      return (<Text {...props}>{ emoji }</Text>);
    }
    return (<SvgText {...props}>{ emoji }</SvgText>);
  }
}

I can submit a PR if you'd like or feel free to make the change if you think it's useful. Thanks again for sharing your work! 🏅

Solved: Android Opacity

Posting here in case it saves someone in the community from a little grief.

I just solved an issue I faced where my emoji were appearing perfectly fine on iOS, but when displayed on Android they were not using full opacity even though I set the opacity: 1.0 in the style prop (against a dark-grey background).

The solution is to use color: '#000000' in the style prop for the Emoji itself.

(hat tip)

Found 2 vulnerabilities (1 low, 1 high) in project package

Hi guys!

You need to fix some vulnerabilities in your project:

Hope this help 😃

star-struck incorrect naming convention?

star_struck does not work but star-struck does. This seems to violate the naming convention of replacing hyphens with underscores?

Hand emojies doesnt work on android.

For some reason alot of the hand emojis doesnt work on android, and keep showing the label you send in.

Fex, crossed_fingers, handshake.

Get the faces and people to work, but not the hands.

Im on RN 0.57.5

Pull Request?

Hi @EricPKerr,

I forked your Library and made some changes which are breaking backwards compatibility. You can see it here: https://github.com/alexkuttig/react-native-emoji

I added EmojiCompat on Android and added an export for an EmojiText, which basically is Text from 'react-native', but with EmojiCompat support on Android.

Do you want me to make a pull request or shall I publish a seperate npm package?

Best,
Alex

My code is <Text>(bla bla bla <Emoji name="coffe"/>) bla bla bla</Text>

But keeps not working the result you can see below:

Someone has this same problem? Can help me?

Tks!

at the top of my file and reload the app on iOS, I start seeing an error:

Cannot read property 'string' of undefined

If I remove that import statement, the app builds and runs fine.

End result is text printed with :shopping_trolley: on template.