2

I am trying to use @ui-kitten/metro-config with the new EAS build flow from Expo.

Everything works well when I build an app for development and serve it through a development client. However, when I build a standalone version, the custom mapping I defined through my mapping.json does not get applied.

The documentation linked above says that one would have to run a CLI command before building in a CI environment: ui-kitten bootstrap @eva-design/eva ./path-to/mapping.json. But I can't figure out where to place this command so that it gets executed on EAS build servers at the right time.

Here is a reproducible example: https://github.com/acrdlph/expo-mcve/tree/ui-kitten - in development builds (which depend on a dev client) the h1 size is re-defined according to the mapping.json. In the preview and production profiles the h1 tag defaults back to its normal size.

Grateful for all pointers!

achill
  • 86
  • 3

1 Answers1

3

I had the exact same issue. There seems to be an bug in the metro-configuration and the .json mapping, or it might be expected behavior, I am not entirely sure. I fixed it by applying the custom mapping.json in both the ApplicationProvider as:

     import { default as theme } from './theme.json'; 
     import { default as mapping} from './mapping.json';
     ....
     <ApplicationProvider {...eva} theme={{ ...eva.dark, ...theme }} customMapping={mapping}>
      <HomeScreen />
     </ApplicationProvider>

And the metro.config.js file as:

const path = require('path');
const MetroConfig = require('@ui-kitten/metro-config');
const {getDefaultConfig} = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

const evaConfig = {
   evaPackage: '@eva-design/eva',
   customMappingPath: path.resolve(__dirname, 'mapping.json'),};

module.exports = MetroConfig.create(evaConfig,config);

I found some insight in this issue https://githubhot.com/repo/akveo/react-native-ui-kitten/issues/1568

Crane
  • 31
  • 2