React-native-ui-kitten: Use eva-icons render white space

[fengyenet]

My packages:
@ui-kitten/[email protected]
[email protected]
@eva-design/[email protected]
@ui-kitten/[email protected]

And in App.js:

import * as eva from '@eva-design/eva';
import { ApplicationProvider,IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
<>
    <IconRegistry icons={EvaIconsPack} />
    <ApplicationProvider {...eva} theme={eva.light}>
                         <HomeScreen />
    </NavigationContainer>
    </ApplicationProvider>
</>

Target Screen:

import { IndexPath, Layout, Select, SelectItem, Input,Button,Icon } from '@ui-kitten/components';
<Button style={styles.closeOperation} appearance='ghost' status='basic'>
    <Icon name="star" />
</Button>

And then it failed to render, Render white space. Please help me, thank you.

[artyorsh]

Does your application use @ui-kitten/metro-config package?
In case of yes, please share the metro.config.js file contents.

Or upload a minimal repo that reproduces it, thanks.

[fengyenet]

This is mine package.json:

{
  "_from": "@ui-kitten/components",
  "_id": "@ui-kitten/[email protected]",
  "_inBundle": false,
  "_integrity": "sha1-akFxkiDxyYr8NyGrwZZZ9+OhKe0=",
  "_location": "/@ui-kitten/components",
  "_phantomChildren": {
    "react-is": "16.13.1"
  },
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "@ui-kitten/components",
    "name": "@ui-kitten/components",
    "escapedName": "@ui-kitten%2fcomponents",
    "scope": "@ui-kitten",
    "rawSpec": "",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npm.taobao.org/@ui-kitten/components/download/@ui-kitten/components-5.0.0.tgz",
  "_shasum": "6a41719220f1c98afc3721abc19659f7e3a129ed",
  "_spec": "@ui-kitten/components",
  "_where": "/opt/jianyan360/jianyanapp",
  "author": {
    "name": "akveo",
    "email": "[email protected]"
  },
  "bugs": {
    "url": "https://github.com/akveo/react-native-ui-kitten/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "@eva-design/dss": "^2.0.0",
    "@eva-design/processor": "^2.0.0",
    "fecha": "3.0.3",
    "hoist-non-react-statics": "^3.2.1",
    "lodash.merge": "^4.6.1"
  },
  "deprecated": false,
  "description": "React Native components based on Eva Design System",
  "homepage": "https://github.com/akveo/react-native-ui-kitten#readme",
  "keywords": [
    "react-native",
    "ui-kitten",
    "ui-kit"
  ],
  "license": "MIT",
  "name": "@ui-kitten/components",
  "peerDependencies": {
    "react-native-svg": "^9.13.6"
  },
  "publishConfig": {
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akveo/react-native-ui-kitten.git"
  },
  "version": "5.0.0"
}

[fengyenet]

I can't find @ui-kitten/metro-config/metro.config.js,

I only found mtero.config.js In the react-native/template and metro/src/integration_tests, Do you need this?

[fengyenet]

I try to use [email protected], But it can't work.

[fengyenet]

I try to install npm install @ui-kitten/metro-config, and modify metro.config.js Is:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@eva-design/eva',
  // Optional, but may be useful when using mapping customization feature.
  // customMappingPath: './custom-mapping.json',
};
module.exports = MetroConfig.create(evaConfig,{
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
});

But it can't work too.

[artyorsh]

Sorry, I had missed the "Target Screen" code

<Button style={styles.closeOperation} appearance='ghost' status='basic'>
    <Icon name="star" />
</Button>

This is not a correct way to render icons inside the Button. Please be advised to visit documentation page and see the examples.

In a few words, you're missing at least width, heigh and fill properties of Icon, which renders react-native-svg elements under the hood (this is also mentioned in the docs)

[fengyenet]

Thanks, it's work, I forgot that image needs width and height, otherwise it can't be rendered. I thought it had a default value. I saw that only name properties in the document, so I thought that only name properties needed to be set. Thank you again for your patience. Thank you very much.