react-native-ui-kitten 4.4.1 performance improvement instruction result in failed metro launch

issue.md

🐛 Bug Report

To Reproduce

Follow provided instructions at https://akveo.github.io/react-native-ui-kitten/docs/guides/improving-performance#improving-performance

$ npm start --reset-cache

> [email protected] start /Users/will/repos/my-app-repo/MyApp
> react-native start

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

error The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object. Run CLI with --verbose flag for more details.
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object
    at Hash.update (internal/crypto/hash.js:65:11)
    at Function.BootstrapService.createChecksum (/Users/will/repos/my-app-repo/MyApp/node_modules/@ui-kitten/metro-config/services/bootstrap.service.js:132:10)
    at Function.BootstrapService.processMappingIfNeeded (/Users/will/repos/my-app-repo/MyApp/node_modules/@ui-kitten/metro-config/services/bootstrap.service.js:99:41)
    at Function.BootstrapService.run (/Users/will/repos/my-app-repo/MyApp/node_modules/@ui-kitten/metro-config/services/bootstrap.service.js:58:26)
    at Object.handleMetroEvent [as update] (/Users/will/repos/my-app-repo/MyApp/node_modules/@ui-kitten/metro-config/index.js:51:41)
    at /Users/will/repos/my-app-repo/MyApp/node_modules/metro/src/index.js:126:27
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/will/repos/my-app-repo/MyApp/node_modules/metro/src/index.js:46:24)
    at _next (/Users/will/repos/my-app-repo/MyApp/node_modules/metro/src/index.js:66:9)

Expected behavior

Metro successfully bundles files and app runs

Link to runnable example or repository (highly encouraged)

• None

UI Kitten and Eva version

Package	Version
@eva-design/eva	4.4.1
@ui-kitten/components	4.4.1

Environment information

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
  Binaries:
    Node: 12.6.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 28.0.3, 29.0.3
      System Images: android-25 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.1 => 16.8.1
    react-native: ^0.61.5 => 0.61.5
  npmGlobalPackages:
    react-native-cli: 2.0.1

Any chance you use custom mapping as .js object and not a json?

Oh no, thanks for pointing me there. It was json, but since I copied and pasted the code from the docs, i didn't rename to my file :(
But now that I have done that, it starts with no problem, but material theme is not applied, and my custom font specified in app-mapping.json isn't used either.

const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@eva-design/material',
  customMappingPath: './src/app/app-mapping.json',
};

module.exports = MetroConfig.create(evaConfig, {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
});

How do you pass props to ApplicationProvider?

My theming setup is a copy of what you did with UI Kitten (great example btw!)

import * as eva from '@eva-design/eva';
// ...
<ApplicationProvider {...eva} theme={theme}>

You need to do from '@eva-design/material' if you use material

Also, you don't need to have both Eva and material packages installed. Use just one. I thought it is clear and there is no need to explain it 😓

Aaah, thank you, I did not realize that needed to be updated. I misunderstand how your metro config works.
Also, it is clear that one can use just one package for mappings, but I intend to play a lot more with the app's looks and not sure whether I'll settle with eva/material yet.

A evaPackage param is used to find it in node_modules, process the original mapping.json, combine it with processed custom-mapping.json retrieved by reading file from customMappingPath, store the results in generated.json and update index.js. When you spread {...eva}, ApplicationProvider receives all properties from that index.js and if there is generated result, it will use it. Also, do some caching to determine if it should be reprocessed during the next reload. Easy😂

In more details - https://github.com/akveo/react-native-ui-kitten/blob/10dccf2c7217d49e8aaeaf29a947caf3f7543062/src/metro-config/services/bootstrap.service.ts#L41