Storybook: Using require.context on react-native

[billcastillo]

Describe the bug
I'm trying to use require.context for react-native but it throws an error. I've installed babel-plugin-require-context-hook and added it to babel.config.js

require('babel-plugin-require-context-hook/register')();

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['require-context-hook'],
};

But throwing an error:

error: bundling failed: Error: Unable to resolve module `path` from `/Users/.../node_modules/babel-plugin-require-context-hook/register.js`: Module `path` does not exist in the Haste module map

To Reproduce
Steps to reproduce the behavior:

1. In a react-native with storybook, replace storybook/index.js contents with:

const req = require.context('../app/components', true, /\.stories.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

1. at the project root, yarn start
2. open another terminal, react-native run-android or ios and in parallel, run yarn storybook

Expected behavior
Loop thru the app/components/ files with regex /\.stories.js$/

What i've tried so far:

• Restart mac
• clear cache
• clear watchman cache
• reinstall node_modules

[shilman]

AFAIK this isn't possible in RN, but my info may be outdated (RN world moving fast...)

[billcastillo]

@shilman okay understood, but do you happen to know a workaround?

[shilman]

From the docs: https://storybook.js.org/docs/basics/writing-stories/

The React Native packager resolves all the imports at build-time, so it’s not possible to load modules dynamically. There is a third party loader react-native-storybook-loader to automatically generate the import statements for all stories.