React-native-element button not showing icon in react-native-web using Next.js

Question

I using react-native-web in Next.js, then I want to use react-native-element library, which depend on react-native-vector-icons.

After read the documenation, Usage On The Web ,and this example here is what I tried:

In my next.config.js:

const path = require('path');
const withTM = require('next-transpile-modules')
([
    'react-native-elements',
    'react-native-paper',
    'react-native-ratings',
    'react-native-vector-icons',
    'react-native-safe-area-view',
    'react-native-status-bar-height',
    'react-native-normalize',
]);

module.exports = withTM({
    devIndicators: {
        autoPrerender: false,
    },
    webpack: (config, { defaultLoaders }) => {
        config.resolve.alias = {
            ...(config.resolve.alias || {}),
            // Transform all direct `react-native` imports to `react-native-web`
            'react-native$': 'react-native-web',
        };
        config.resolve.extensions.push('.web.ts', '.web.tsx', '.ts', '.tsx', '.web.js', '.web.jsx', '.js', '.jsx');
        config.resolve.modules = [ ...config.resolve.modules, path.resolve(__dirname, 'node_modules') ];
        config.resolve.symlinks = false;
        config.module.rules.push(
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [ 'url-loader?limit=10000', 'img-loader' ]
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                exclude: /node_modules/,
                loader: 'file-loader'
            },
            {
                test: /\.(woff|woff2)$/,
                exclude: /node_modules/,
                loader: 'url-loader?prefix=font/&limit=5000'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
                include: path.resolve(__dirname, 'node_modules/react-native-vector-icons')
            }
        );

        return config;
    }
});

babel.config.js

module.exports = {
    presets: [ 'next/babel' ],
    plugins: [
        [ 'react-native-web', { commonjs: true } ],
        [
            '@babel/plugin-transform-runtime',
            {
                absoluteRuntime: false,
                corejs: false,
                helpers: true,
                regenerator: true,
                useESModules: true,
                version: '7.0.0-beta.0'
            }
        ],
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-async-to-generator',
        '@babel/plugin-proposal-class-properties'
    ]
};

package.json

{
  "name": "with-react-native-web",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native-elements": "^1.2.7",
    "react-native-normalize": "^1.0.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/plugin-transform-async-to-generator": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@zeit/next-typescript": "^1.1.1",
    "babel-plugin-react-native-web": "^0.11.7",
    "customize-cra": "^1.0.0",
    "file-loader": "^5.0.2",
    "img-loader": "^3.0.1",
    "next-images": "^1.3.1",
    "next-transpile-modules": "^3.1.0",
    "url-loader": "^3.0.0"
  }
}

As you can see, I already install the react-native-element, react-native-web and react-native-vector-icon in package.json. Then I also transpile all the module in next.config.js using next-transpile-modules library.

Then in pages/index.js I use the library like this:

import { Button, Text, Image } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

<View style={styles.container}>
 <Button
    icon={{
      name: "arrow-right",
      size: 15,
      color: "white"
    }}
    title="Button with icon object"
  />
</View>

But this is what I got for result:

Question:

What I still missing at this moment that make the icon not showing?And how I can do it in Next.js? Since the documentation didnt mention anything about Next.js.