Emoji component doesn't show on react-native <= 0.63.1 and iOS 14

[CptMaumau]

I have tried the Emoji and NimbleEmoji components, without props, with spriteSheetFn prop and with useLocalImages prop but none of this show on iOS.

Is there an extra installation step I'm missing?

[pederjohnsen]

HI @CptMaumau, how are you using the spriteSheetFn and useLocalImages props?

To use either there are some extra steps required: For useLocalImages: https://github.com/tunoltd/emoji-mart-native#local-image-requires though I advice against using useLocalImages as it will eventually be removed, I did remove it initially when I added spriteSheetFn but due to a bug on Android sprite sheet emojis end up slightly blurry so I left this in to be able to still get nice and clear emojis on Android.

For spriteSheetFn: https://github.com/tunoltd/emoji-mart-native#spritesheetfn

For best results with spriteSheetFn you should add your local spritesheet to your app package.

An alternative which is also the fastest, you can just use the native prop, however it comes with potentially unwanted effects when used on older phones which doesn't support all the latest emojis.

[CptMaumau]

Hi @pederjohnsen thank you for your quick answer! I have tried spriteSheetFn two ways, first I put the sheet in my app src and use require : spriteSheetFn={() => require('../../images/google-emojis.png')} (this works on Android)

I also tried tried adding the sheet to the iOS Resources and get it like : spriteSheetFn={() => ({ uri: 'images/google-emojis.png' })}

I'm not getting any errors so I believe the component finds the file but still nothing appears.

As you can see it's the google emojis I am trying to show and I have made sure that the set prop is set to google, I also tried to import the google.json and set it via the data prop.

[pederjohnsen]

I also tried tried adding the sheet to the iOS Resources and get it like : spriteSheetFn={() => ({ uri: 'images/google-emojis.png' })}

I think (though not an iOS app expert) if it's in the correct place, you should be able to just do this: spriteSheetFn={() => ({ uri: 'google-emojis' })}

However to easier debug this if a library issue, could you give the example app a go? https://github.com/tunoltd/emoji-mart-native-example

If you look in https://github.com/tunoltd/emoji-mart-native-example/blob/master/App.js you'll see that preview emoji and the inline picker uses the sprite sheet method (when using twitter set it has the spritesheet loaded from the app package) while the modal picker uses the local images method.

You might experience some delay when switching from the twitter set to any other set but switching back to the twitter set should be near instant.

[CptMaumau]

I tried the example app on both Simulator and an iPhone and nothing shows at all... I experienced the delay with the twitter set so something is loading but nothing appears.

I'm really starting to think something is missing in the way I install the library or maybe it's my computer, I am using XCode 12.4 on a Mac Mini with M1 chip

[pederjohnsen]

@CptMaumau interesting... A couple more questions:

What process do you use to run the app? What iPhone is used (both physical and simulator)?

[CptMaumau]

@pederjohnsen I use yarn ios to run the process but I have also tried via Xcode. The simulator is an iPhone 11 (iOS 14.4) and the physical is an iPhone Xs (iOS 14.4.1)

[pederjohnsen]

@CptMaumau thanks, I don't have a mac with the M1 chip but I use the same Xcode so will try replicate the issue simulating those 2 phones.

I guess if it still works for me there could potentially be something related to the mac 🤔 either environment specific or the hardware itself 😕

[pederjohnsen]

@CptMaumau looks like it's the iOS version which has broken it, I can replicate using iOS 14.4 😱 🤯

Will try investigate and hopefully get a fix sorted 🙏🏻

[pederjohnsen]

@CptMaumau after a quick search it looks like the issue is with older versions of React Native and iOS 14: https://stackoverflow.com/questions/62612812/all-image-fast-image-in-react-native-app-not-working-on-ios-14-beta-and-xcode-12#answer-64152729

I will upgrade the example app to v0.63.2 or higher after work today and see if that really helps, if you can't upgrade the RN version yet for the app you are working on with this lib, you could try the second solution in that answer and see if it helps 🤔

[CptMaumau]

@pederjohnsen Thanks I will try this solution.

[CptMaumau]

Second solution works! I was already aware of this bug but didn't think it would affect my app since other Image components show well. Anyway thanks for taking the time to help!

[pederjohnsen]

@CptMaumau glad to hear! :)

[pederjohnsen]

I've pinned https://github.com/tunoltd/emoji-mart-native/issues/212 in case any others run into the same issues, thanks for bringing this to light 👌🏻

Also, feel free to post about your project using this lib here when you finish: https://github.com/tunoltd/emoji-mart-native/discussions/categories/show-and-tell I'm always interested in seeing what people are using this lib for 😍