Metro Context Modules Demo
This is a demo of using the experimental 'Context Module' (require.context) feature in Metro bundler.
Setup
metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);
config.transformer = {
// `require.context` support
unstable_allowRequireContext: true,
};
module.exports = config;
At the moment, you'll need to force the Metro versions in your package.json:
{
"resolutions": {
"metro": "0.72.1",
"metro-babel-transformer": "0.72.1",
"metro-cache": "0.72.1",
"metro-cache-key": "0.72.1",
"metro-config": "0.72.1",
"metro-core": "0.72.1",
"metro-hermes-compiler": "0.72.1",
"metro-minify-uglify": "0.72.1",
"metro-react-native-babel-preset": "0.72.1",
"metro-react-native-babel-transformer": "0.72.1",
"metro-resolver": "0.72.1",
"metro-source-map": "0.72.1",
"metro-symbolicate": "0.72.1",
"metro-transform-plugins": "0.72.1",
"metro-transform-worker": "0.72.1"
}
}
If you want to add TypeScript support to require.context, include the types/metroRequire.d.ts, then extend the tsconfig.json:
{
"extends": "expo/tsconfig.base",
"include": ["./types/metroRequire"]
}
Usage
- Run
yarn start - Add files to the
app/folder to see the UI update dynamically.
For more info, see the Webpack docs on require.context.
const ctx = require.context("./app");
const myModule = ctx[ctx.keys()[0]];
3 Oct 16, 2022
10 Dec 17, 2022
40 Jan 3, 2023
62 Dec 17, 2022
22 Dec 19, 2022
65 Dec 28, 2022
187 Dec 21, 2022
1 Jan 2, 2022
10 May 14, 2022
153 Dec 23, 2022