not showing emoji images in release build

[sibelius]

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

[sibelius]

any of this images that uses require are not working neither android or ios

we are using rn 0.62.2

[pederjohnsen]

@sibelius hmm odd, are the paths correct? I mean if it works in debug mode I guess they should be 🤔

Is RN failing to include them in the bundle or something maybe? :-/ Any reason why you don't use the files from node_modules as with the example app?

Also if you want the best performance, you should probably just use the '64': { uri: 'twitter_emoji_64' } way anyway. Will try do some testing tomorrow after work to see if I can figure out what is happening..

[sibelius]

Not working in dev mode either in fact

Why should I use node modules in require?

We have a monorepo, so node modules can be in other places not sure if this is related

Why twitter 64 is different from the rest?

[pederjohnsen]

Any useful errors in dev mode?

The code for the twitter 64 sheet tries to load it from the app assets, ie: https://github.com/tunoltd/emoji-mart-native-example/tree/master/ios/example/Images.xcassets/twitter_emoji_64.imageset

This would be the preferred way as from my testing it is the fastest (especially on iOS)

[sibelius]

It just don’t render it, the require is correct

When I change to use uri instead it renders well

[pederjohnsen]

@sibelius odd, will do some testing tomorrow 👌, getting a bit late here 🏃

[sibelius]

Another point was that was apk was 44mb

and now using local images are 187,5mb

I think this tells me why the bundling got slower

[pederjohnsen]

@sibelius yeah, I would advice against including all the different emojis using localImages. We currently use localImages just for the google ones on Android, then the apple sprite sheet on iOS for our live app in work.

I was planning on sunsetting localImages but due to the React Native and Fresco bug I decided to leave it in to still have a way to render clear emojis on Android.

[sibelius]

can we add a section in the docs about the tradeoffs of all possible approaches?

[pederjohnsen]

@sibelius yeah, it would be good to document. I've not paid enough attention to the readme so far really, but mostly due to it still being in beta and some things potentially being removed by the time we get to v1..

[sibelius]

it looks like it is an issue with monorepo handling of assets

https://github.com/react-native-community/cli/issues/826