React-native-ui-kitten: The app crashes when using new Hermes engine

[johanquiroga]

Issue type

• [x] bug report
• [ ] feature request

Issue description

Current behavior:

The app crashes when using new Hermes engine.

This only happened once I added the Icons Module, before that the app was working correctly with the Hermes engine.

Expected behavior:

The app works with or without the Hermes engine.

Steps to reproduce:

Other information:

OS, device, package version

"@eva-design/eva": "^1.2.0"
"@ui-kitten/eva-icons": "^4.2.0"
"react-native": "0.61.1"
"react-native-ui-kitten": "^4.2.0"

[artyorsh]

Hi @johanquiroga 👋
I guess this is mostly not a framework issue, just because Hermes engine does not currently support Proxies. See the related thread

And yes, this is because Icons module relies on Proxies, but this was the simplest solution for us. Btw, MobX users have the same issues with Hermes.

[anhtuank7c]

I think we should use module proxy-polyfill for this line:
https://github.com/akveo/react-native-ui-kitten/blob/05a3471c49916e8bdf8f7caaf3070b409582025e/src/eva-icons/createIconsMap.ts#L7

ie:

import PolyfillProxy from 'proxy-polyfill/src/proxy'

...
return new PolyfillProxy({}, {...})

[artyorsh]

@anhtuank7c does it resolves an issue?

[artyorsh]

@anhtuank7c I did some review on this now, and what I get is that we don't get application crashes, but for any reason it's unable to find requested property, e.g:

const HeartIcon = () => <Icon name='heart' />

will lead to runtime error of @ui-kitten/eva-icons package saying 'heart' does not exist

[AndreaTurco]

Hi all
In my case, this issue is present only on android and my currently workaround is :

• use the solution showed by @anhtuank7c
• removed all the import { Icon } from '@ui-kitten/components'; and use:

import React from 'react';
import { Image } from 'react-native';
import { Button } from '@ui-kitten/components';

const RemoteBulbIcon = (style) => (
  <Image
    style={style}
    source={{ uri: 'https://akveo.github.io/eva-icons/outline/png/128/bulb-outline.png' }}
  />
);

export const IconExternalSourceShowcase = (props) => (
  <Button icon={RemoteBulbIcon}>
    Login with Facebook
  </Button>
);

icons from: (https://akveo.github.io/eva-icons/#/)

Other information:
OS, device, package version:

    "@eva-design/eva": "^1.3.1",
    "@ui-kitten/eva-icons": "^4.3.2",
    "react-native-ui-kitten": "4.3.2",

[artyorsh]

@AndreaTurco the reason is that Hermes engine doesn't support proxies. This engine is used to increase Android performance, and it doesn't affect iOS in total. Currently we have no workaround to get rid of proxies, so if you really need Hermes - your solution would work, but will affect UX because of loading icons remotely instead of using SVGs.

[anhtuank7c]

Good news ever!!!!

https://twitter.com/HermesEngine/status/1245136667414913024

[artyorsh]

@anhtuank7c thanks for sharing 👍

[lewatt23]

@anhtuank7c Please any workaround? am using react-native 0.62 but I still have this error...

[anhtuank7c]

@lewatt23 Did you try npm install [email protected]?

[lewatt23]

@anhtuank7c My bad thought I was installed by default since I was using rn 0.62.2, just installed and is working fine, thanks :)

[afkcodes]

for those using 0.63 use npm install [email protected]

[santiago1393]

for those using 0.63 use npm install [email protected]

It worked after clean gradle builds
Thanks!!

[kuasha420]

0.64 will have Proxy enabled by default on Hermes. Woohoo!