"You may need an appropriate loader to handle this file type" when using EvaIconsPack in react native web

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

Current behavior:

After installing @ui-kitten/eva-icons package and trying to setup it with <IconRegistry icons={EvaIconsPack} />, when I try to open my expo project in a web browser, I get the following error:

 web  Failed to compile.
/Users/williankrause/des/abastecame/node_modules/@ui-kitten/eva-icons/evaIcon.component.js 21:16
Module parse failed: Unexpected token (21:16)
You may need an appropriate loader to handle this file type.
|         // @ts-ignore - Eva maps icon color to `tintColor`
|         const { tintColor } = props, restProps = __rest(props, ["tintColor"]);
>         return (<Icon fill={tintColor} {...restProps}/>);
|     }
| }

It works nice on Android/iOS tho.

Expected behavior:

My app would open without a compilation error

Steps to reproduce:

• Create a new Expo app
• Follow all steps from https://akveo.github.io/react-native-ui-kitten/docs/guides/eva-icons#setup-icons-module (including installation of react-native-svg)
• Add <IconRegistry icons={EvaIconsPack} /> right before ApplicationProvider component
• run yarn start and press w to open app in a browser

Related code:

import React, {
    useState,
    useCallback,
    useContext,
    createContext,
    FunctionComponent,
    PropsWithChildren
} from 'react';
import { light, dark, mapping } from '@eva-design/eva';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import {
    ApplicationProvider,
    IconRegistry,
    ThemeType
} from 'react-native-ui-kitten';

type ThemeContextType = {
    theme: ThemeType;
    changeTheme: () => void;
    isDarkThemeActive: boolean;
};

const ThemeContext = createContext<ThemeContextType>(null);

const ThemeContextProvider: FunctionComponent<PropsWithChildren<{}>> = ({
    children
}) => {
    const [theme, setTheme] = useState(light);
    const [isDarkThemeActive, setDarkThemeActive] = useState(false);

    const changeTheme = useCallback(() => {
        setTheme(isDarkThemeActive ? light : dark);
        setDarkThemeActive(currentValue => !currentValue);
    }, [isDarkThemeActive, setDarkThemeActive, setTheme]);

    return (
        <ThemeContext.Provider
            value={{
                theme,
                changeTheme,
                isDarkThemeActive
            }}
        >
            <IconRegistry icons={EvaIconsPack} /> {/* if I comment this and lines 10/13, it works  */}
            <ApplicationProvider mapping={mapping} theme={theme}>
                {children}
            </ApplicationProvider>
        </ThemeContext.Provider>
    );
};

export const useTheme = (): ThemeContextType => useContext(ThemeContext);

export default ThemeContextProvider;

Other information:

OS, device, package version MacOS Mojave, Google Chrome

"@eva-design/eva": "^1.2.0",
"@ui-kitten/eva-icons": "^4.2.0",
"react-native-svg": "~9.9.2",
"react-native-ui-kitten": "^4.2.0",

[artyorsh]

Got this fixed in 4.3.2 🎉 Upgrade

[RooQI]

@artyorsh And by the way, “Hello from Russia.” You have a great product.