Hot to configure metro for EAS builds?

[acrdlph]

💬 Question

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. The CLI command is not available even after I install @ui-kitten/metro-config in the project directory as a development dependency. I think the documentation isn't very clear on this.

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.

(I posted this question on StackOverflow, too, but no responses so far - hence turning to you here 🙏)

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.1
@ui-kitten/components	5.1.1

[GautierT]

Hey @acrdlph
Did you find any solution ? I have the same problem. Mapping.json not picked up on production build...

My metro.config.js file is :

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

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

const defaultConfig = getDefaultConfig(__dirname);

module.exports = MetroConfig.create(evaConfig, {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: defaultConfig.resolver.assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
  },
});

When I eas build i have this message :

It looks like that you are using a custom metro.config.js that does not extend @expo/metro-config.
This can result in unexpected and hard to debug issues, like missing assets in the production bundle.
We recommend you to abort, fix the metro.config.js, and try again.
Learn more on customizing Metro
✔ Would you like to abort? … no

[acrdlph]

Unfortunately no solution yet -- I also tried using the 'old' / un-optimized way of passing the mapping as <ApplicationProvider {...eva} customMapping={mapping} but that crashes the app.

This is forcing me to move away from UI Kitten, because without custom mapping I'd rather build the components myself.

[GautierT]

The weird thing is that on IOS the mapping work. And on the android dev client too (when I build with "developmentClient": true)
You too ?

[GautierT]

@acrdlph FYI : If I use

import * as eva from '@eva-design/eva';

import { myTheme } from './src/design/custom-theme.3454D1';

import { default as mapping } from './mapping.json'; // <-- Import app mapping

<ApplicationProvider {...eva} theme={{ ...eva.light, ...myTheme }} customMapping={mapping}>

with
mapping.json

{
  "strict": {
    "text-font-family": "Nunito_400Regular",
    "text-subtitle-2-font-size": 20
  }
}

I don't have any crash.

[acrdlph]

Yes for me, the metro config approach works in the development client - just not in production Play / App Store builds.

However @GautierT, you are also right that the regular customMapping approach works even in production -- it was just an issue with my particular mapping.json that made my app crash previously. So the issue here is just about making the metro config approach (with its improved performance) work in production.

[dubchoi]

Was having this issue w/ play & app store builds also.
Adding this custom script for eas fixed it:

{
  "scripts": {
    "eas-build-post-install": "./node_modules/@ui-kitten/metro-config/bin/ui-kitten bootstrap @eva-design/eva YOUR_PATH_TO_MAPPING_FILE"
    ...
  },
  ...
}

See https://docs.expo.dev/build-reference/how-tos/

[poinch]

@dubchoi Hey man, sorry for bothering you but i was wondering that you added this script to your package.json and then what is the next step? i dont pick it up

[dubchoi]

@poinch No worries, you just have to add the line with the correct path to your mapping file, and the next build through EAS will automatically run the script.

[glisom]

@dubchoi thank you big time! Great find and very cool EAS Build extension. I needed that for a Sentry issue too!