The app crashes when using new Hermes engine

akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

https://akveo.github.io/react-native-ui-kitten/

MIT License

10.27k stars 951 forks source link

The app crashes when using new Hermes engine #664

Closed johanquiroga closed 4 years ago

johanquiroga commented 4 years ago

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. Screenshot_1570497400

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@anhtuank7c does it resolves an issue?

artyorsh commented 4 years ago

@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 commented 4 years ago

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) => (

);

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 commented 4 years ago

@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 commented 4 years ago

Good news ever!!!!

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