React-native-ui-kitten: Custom mapping not working

[harryy2510]

🐛 Bug Report

Passing a custom mapping like this doesn't work for some reason

But passing it like this works

Custom mapping is the same for both scenarios

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | ^2.0.0-alpha.1 |
| @ui-kitten/components | ^5.0.0-alpha.1 |

Environment information

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 13.9.0 - ~/.nvm/versions/node/v13.9.0/bin/node
    Yarn: 1.22.4 - ~/.yvm/shim/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.9.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28
      Build Tools: 27.0.3, 28.0.3, 29.0.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 

[artyorsh]

@harryy2510 any chance @ui-kitten/metro-config is included in your package.json and has it's configuration in metro.config.js?

[harryy2510]

Yes I do have @ui-kitten/metro-config installed but doesn't have metro.config.js but instead webpack.config.js

[gabrielepmattia]

I had the same issue, I solved it by following this guide https://akveo.github.io/react-native-ui-kitten/docs/guides/improving-performance#improving-performance

[artyorsh]

@gabrielepmattia @harryy2510 Sorry for the late reply. Just tried it in a fresh project initialized with template and couldn't reproduce.

Could you please share a reproducible demo or describe the steps on how did you initialize?
What @ui-kitten/metro-config does is pre-generating styles during the metro bundler build time. And if it was successful, ApplicationProvider will ignore customMapping. Not having metro.config.js means not having anything pre-generated.

[artyorsh]

Snack Demo

Closing this since there is no problem with this 🤷‍♂️
But I'm still interested what was wrongly configured on your side

[gabrielepmattia]

@artyorsh I created from scratch a new project, I copied your mapping.json and it is still not working. Here's the repository of the sample project (https://github.com/gabrielepmattia/react-native-ui-kitten-custom-mapping-issue), you can check the commits for seeing what I've done, maybe I'm doing something wrong. Steps to reproduce:

1. Start new project with npx react-native init MyApp --template @ui-kitten/template-js
2. Create mapping.json and import in App.tsx with import { default as appMapping } from './mapping.json';
3. Add customMapping={appMapping} to ApplicationProvider in App.tsx
4. Add resolveJsonModule in tsconfig.json for allowing loading of json files
5. Run npx react-native run-android or npx react-native run-ios

I attach here the screenshots, again only pre-building the mapping makes the button turn pink. I also get type errors in the custom mapping and in the button icon (attached screenshot).

Thank you for your time

P.S.: Moreover the Heart icon in the button is missing.

[phamquyhai]

@artyorsh But not working with Custom Component Mapping
I copied CircleButton and custom mapping for CircleButton. but not working.

[artyorsh]

@KaKaVip yep, thanks for the details. I fixed that in d120d5d. This is an upcoming change anyway, but if you need to use it currently, this may achieved by modifying props like the migration guide says. Sorry for such type of issue.

@gabrielepmattia thanks for the details 👍The commit above also gives some notes on this. The problem is you use metro configuration which creates a styles during the build time. customMapping property is not required in this case as it is completely ignored. What you can do is modifying your metro.config.js with.

const evaConfig = {
  evaPackage: '@eva-design/eva',
  customMappingPath: './path-to/custom-mapping.json', 
};

Maake sure to restart the bundler afterwards.

[gabrielepmattia]

@KaKaVip yep, thanks for the details. I fixed that in d120d5d. This is an upcoming change anyway, but if you need to use it currently, this may achieved by modifying props like the migration guide says. Sorry for such type of issue.

@gabrielepmattia thanks for the details The commit above also gives some notes on this. The problem is you use metro configuration which creates a styles during the build time. customMapping property is not required in this case as it is completely ignored. What you can do is modifying your metro.config.js with.

const evaConfig = {
  evaPackage: '@eva-design/eva',
  customMappingPath: './path-to/custom-mapping.json', 
};

Maake sure to restart the bundler afterwards.

Perfect, now it's clear but metro.config.js is created automatically by the project template, I think it should pointed out in the docs as a side note that the custom mapping must not to be used in the ApplicationProvider, especially for newcomers as me! Thank you!

[artyorsh]

it should pointed out in the docs as a side note that the custom mapping must not to be used

That is what I did 🙌