tunoltd / emoji-mart-native Goto Github PK

Describe the bug
I added <NimblePicker set='apple' data={data} /> to one of my components and when I go to scroll my iPhone resprings and reboots.

To Reproduce
I simply installed the module, added it to my component and tried to scroll.

Expected behavior
It scrolls normally 😅

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] iPhone 11 Pro Max
• OS: [e.g. iOS8.1] iOS 13.4.1

Additional context
My project is using the newest version of Expo if that helps.

componentWillReceiveProps will be removed in React 17.x.

Add option to use local images for custom emojis

• Add localImage param to custom emoji object for using local images
• Add custom emoji support to <Emoji/> for rendering custom emojis

https://jestjs.io/docs/en/tutorial-react-native

Research possibility of creating a slack like emoji "keyboard"

We're interested to know why people are using (or decided not to use) emoji-mart-native, leave your comments below :)

And for those who have decided to use emoji-mart-native, we'd love to see what you've used it for 🚀

Setup/update eslint/prettier configs, clean up code and update any mismatch

Hi guys, thanks for the good work.
I hope I didn't miss anything..

I am using the ModalPicker in one of my Screens and on an iphone XSMax it takes about 5 seconds to open the first time.

Is that expected ? if yes is the only way to get a better speed to only include a smaller set of icons?

Here is my code in case I am doing something wrong?

import emojiMartData from 'emoji-mart-native/data/apple.json';
import dataRequires from 'emoji-mart-native/data/local-images/apple';
import { ModalPicker } from 'emoji-mart-native';

<ModalPicker
        isVisible
        showCloseButton
        onPressClose={this....}
        data={emojiMartData}
        useLocalImages={localEmojis}
      
        onSelect={emoji => {
           ...
        }}
        autofocus
        data={emojiMartData}
        size={30}
        set="apple"
      />
    );

https://material.io/design/components/tooltips.html#spec

• Make anchor trigger a half page before actual first page of category

After updating UI to be more slack like, we now use a <ScrollView /> with pagination to display all the emojis. We should only render the closest pages to the current active one to hopefully improve performance.

Hi,

I have a local emoji sheet file, and trying to use backgroundImageFn to use that emoji sheet file with the following code:

<Emoji
    key={i}
    set={Config.EMOJI_TYPE}
    native={Config.EMOJI_TYPE === undefined}
    sheetSize={32}
    backgroundImageFn={() => {
        switch(Config.EMOJI_TYPE) {
            case 'myemojisheet':
                return require('../assets/emojis/myemojisheet.png');
            default:
                return `https://unpkg.com/emoji-datasource-${Config.EMOJI_TYPE}@3.0.0/img/${Config.EMOJI_TYPE}/sheets-256/${64}.png`;
        }
    }}
    emoji={arr[i].emoji}
    size={20} />

It shows emojis which supported in this library with this code but it doesn't show my emojis. How can I solve this and show my local emojis?

Skin selection UI feels a bit clunky, make it nicer!

• Long press to open skin options, drag to wanted skin and let go to select?

• Remove all attributes/components etc that is not available in this port
• Update all images to reflect latest changes (inline/modal rendering etc)
• Remove any emojione emojis in images
• Improve any unlcear documentation

I came across this while upgrading from RN 0.56 to 0.59 and figured i'd share.

Failed to load bundle(http://localhost:8081/src/index.bundle?platform=ios) with error:(Unable to resolve module babel-runtime/helpers/classCallCheck from /node_modules/emoji-mart-native/dist/utils/emoji-index/nimble-emoji-index.js: Module babel-runtime/helpers/classCallCheck does not exist in the Haste module map

Came across something similar here babel/babel#1872
and so running this fixed the issue. $ npm install --save babel-runtime --save

missive/emoji-mart#391

• Create new <ModalPicker/> component that wraps <Picker/> in a modal
• Update documentation with new component
• Make <Picker/> render inline-block
• Update documentation that <Picker/> renders inline, and to use <ModalPicker/> to render as modal

Might not be as simple as it sounds, using React Native's AsyncStorage won't work the way store is currently written and used 🤔

Do "frequently store" init() and "skin store" init() on mount before full render if not already init? This way store.get can be asynchronous too (both stores are already cached so will work onwards)

Perhaps i'm overlaying over too many views or something but i have found the ModalPicker to be way too sensitive on detecting touches when paging through emojis. A swipe is easily mistaken for a touch and selects an emoji instead of scrolling to the next page.
In addition i am using local images for the emoji sheets however there seems to be a delay in paging through the ModalPicker still. I have to page waiting a good moment or two between swipes.

emoji-data provides npm packages for each data set with the individual images, research the difficulty of using those over manually downloading each set and adding to project.

npm install emoji-datasource-apple
npm install emoji-datasource-google
npm install emoji-datasource-twitter
npm install emoji-datasource-facebook
npm install emoji-datasource-messenger

In docs we need to mention that in order to render <NimbleEmoji /> we need to pass size prop otherwise it would not be visible.

At least this is what I've came into.

I believe it's a straightforward reqeuest.

I am quite new to react native world so I might not get something. But can we get an option to set the width of the picker?

My use case: using this picker as a keyboard.

Thanks!

On some devices there are some weird offset issues, where pages aren't the correct size, and left positions/widths are not round numbers.

In case it is outdated, what is a proper (recommended) way to update the contents of this file?

We can expose a script api for that purpose.

It would great if we could pass in an emoji when mounting the picker component so it opens on the page with that emoji. Say the user has already selected the "dog" emoji in our app, and then opens the picker again - it would then open on the page with the "dog" emoji instead of at the beginning again (lovely work by the way 🐶)

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

The cyclic dependencies found by metro don't really matter here, it's because index.js is exporting a load of imports that in turn import index.js to access other components. However it's potentially a useful warning in the app, so would be nice to reduce the noise from npm libs if possible.

Looks like there are 4 warnings for emoji-mart-native:

Require cycle: node_modules/emoji-mart-native/dist/components/index.js -> node_modules/emoji-mart-native/dist/components/anchors.js -> node_modules/emoji-mart-native/dist/components/index.js

Require cycle: node_modules/emoji-mart-native/dist/components/index.js -> node_modules/emoji-mart-native/dist/components/category.js -> node_modules/emoji-mart-native/dist/components/index.js

Require cycle: node_modules/emoji-mart-native/dist/components/index.js -> node_modules/emoji-mart-native/dist/components/search.js -> node_modules/emoji-mart-native/dist/components/index.js

Require cycle: node_modules/emoji-mart-native/dist/components/index.js -> node_modules/emoji-mart-native/dist/components/picker/picker.js -> node_modules/emoji-mart-native/dist/components/picker/nimble-picker.js -> node_modules/emoji-mart-native/dist/components/index.js

• Make active indicator be one component and move to top level and animate on category change.

• <ScrollView /> into <Anchors /> component and auto scroll on category change, center align active selection if possible, if not set <ScrollView /> scroll position all the way to the left if category is at beginning of list or to the right if at end of list. (Added in #19)

There seems to be some Android only components used, these need to be wrapped to show ones that work on iOS if iOS.

• Search and cancel search buttons
• Toast displayed on long press of emoji

• component uses react-native-svg to render the svg icon used for the button.
• component uses react-native-vector-icons for the back arrow icon.

Would be nice not to have any dependencies if possible.. (have PNG@x's created?)

There's a bunch of emojis that are now present on standard Android and Apple phones that aren't present in the emoji data at the paths below, and so don't come up in the picker.

 emoji-mart-native/data/google.json 
 emoji-mart-native/data/apple.json 

These include the essential "kangaroo", "smiling face with hearts" and "woozy face" as examples.

Is there any progress on these - what would it entail to include? Thanks :)

We should remove all references to emojione as emoji-data has removed emojione.

Some of the customisation currently available in Emoji Mart may not work with Emoji Mart Native in it's current state.. We should try aim for at least similar customisation options.

Allow more colour customisation to picker

• Text
• Search section
• Emojis section
• Anchor section

Looking for someone to help revision the picker designs, related tasks:

• #70
• #153

• Add custom scrollbars so they can be shown in different colour when in dark mode.
• Fine tune colours
• Fine tune assets

Hi friends, I need your help to solve an error, when I run this component I get the error "componentWillReceiveProps is deprecated ... Use static getDerivedStateFromProps" in the nimble-picker.js file

key: 'componentWillReceiveProps', value: function componentWillReceiveProps(props) { if (props.skin) { this.setState({ skin: props.skin }); } else if (props.defaultSkin && !_skin2.default.get()) { this.setState({ skin: props.defaultSkin }); } }

https://reactnative.dev/docs/accessibility

I'm trying to build an app that is running through Expo but am getting a weird error. I'm currently using 0.4.6-beta Whenever I try to open the app I receive an error message that getSanitizedData is undefined when using it in nimble-emoji-index If I change the inclusion of getSanitizedData to be ../../utils instead of just .. everything works fine.

Has anyone else experienced this?

Text
Search section
Emojis section
Anchor section

I started using useLocalImages to speed up in-app emoji load times for the ModalPicker and Emoji objects. Here's some example usage:

import appleImages from "emoji-mart-native/data/local-images/apple"
import googleImages from "emoji-mart-native/data/local-images/google"
import appleEmojiData from "emoji-mart-native/data/apple.json"
import googleEmojiData from "emoji-mart-native/data/google.json"

const appleEmojis = appleImages.emojis
const googleEmojis = googleImages.emojis

const data = Platform.select({
    ios: appleEmojiData,
    android: googleEmojiData,
    default: appleEmojiData,
  })

const localImages = Platform.select({
    ios: appleEmojis,
    android: googleEmojis,
    default: appleEmojis,
  })

...
<ModalPicker set="apple" data={data} useLocalImages={localImages} />

This has worked well for loading the emojis, but my bundle build times (react-native run-android --variant=release and in XCode) have gone from 5 minutes (pre-change) to around 15 minutes after adding local emoji support.

Any tips? If you can point to some resources on how to fix this, I'm happy to make a PR as well.

Check if there have been made any useful changes to missive/emoji-mart that we want to bring over.

• missive/emoji-mart#206
• missive/emoji-mart#208 We currently allow this with the categoryEmojis prop using emojis, but it's not documented and one can't just change a single categories icon) Will only allow using emojis for now. Later we should consider adding support for custom emojis.
• missive/emoji-mart#209
• missive/emoji-mart#213
• missive/emoji-mart#231
• missive/emoji-mart#245

Seems like iOS renders the header component wrongly when the close button is not shown:

Let's apply prettier checks on commits to catch prettier issues before PR's are made

Describe the bug
It is not showing emojis in release mode, but it works well in debug mode

To Reproduce
Here is my usage:

import { Emoji } from 'emoji-mart-native';
import data from 'emoji-mart-native/data/all.json';
import dataRequires from 'emoji-mart-native/data/local-images/all';

const localSpriteSheets = {
  apple: {
    '16': require('emoji-datasource-apple/img/apple/sheets/16.png'),
    '20': require('emoji-datasource-apple/img/apple/sheets/20.png'),
    '32': require('emoji-datasource-apple/img/apple/sheets/32.png'),
    '64': require('emoji-datasource-apple/img/apple/sheets/64.png'),
  },
  google: {
    '16': require('emoji-datasource-google/img/google/sheets/16.png'),
    '20': require('emoji-datasource-google/img/google/sheets/20.png'),
    '32': require('emoji-datasource-google/img/google/sheets/32.png'),
    '64': require('emoji-datasource-google/img/google/sheets/64.png'),
  },
  twitter: {
    '16': require('emoji-datasource-twitter/img/twitter/sheets/16.png'),
    '20': require('emoji-datasource-twitter/img/twitter/sheets/20.png'),
    '32': require('emoji-datasource-twitter/img/twitter/sheets/32.png'),
    '64': { uri: 'twitter_emoji_64' },
  },
  facebook: {
    '16': require('emoji-datasource-facebook/img/facebook/sheets/16.png'),
    '20': require('emoji-datasource-facebook/img/facebook/sheets/20.png'),
    '32': require('emoji-datasource-facebook/img/facebook/sheets/32.png'),
    '64': require('emoji-datasource-facebook/img/facebook/sheets/64.png'),
  },
};

<Emoji
        onPress={onPress}
        onLongPress={onPress}
        emoji={reaction.icon}
        size={size}
        data={data}
        sheetSize={16}
        useLocalImages={localEmojis}
        spriteSheetFn={(set, sheetSize) => {
          return localSpriteSheets[set][sheetSize];
        }}
        fallback={(emoji, props) => {
            return <Emoji emoji={'slightly_smiling_face'} size={50} />;
       }
      />

Expected behavior
It should work on debug and release mode

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] iPhone 8
• OS: [e.g. iOS8.1] iOS 13

Additional context
I've upgraded from version 4 to latest beta master today