A Cure for Relative Requires in React Native

Say goodbye to require(‘../../../../`)

This is rather undocumented React Native feature so use with caution

When developing large React application, you usually want to split it into sub-projects so that you can share some logic between these targets (web, mobile) and keep your dependencies well organised.

It’s well known fact that `npm link` does not work with React Native yet, so almost everyone usually writes:

require(‘../../../core/todos/actions.js’)

Project structure

Supposing you have the following structure of your project:

/package.json (name = @acme/umbrella)
/src
 /core
   /package.json (name = @acme/core)
   /todos
 /mobile
   /package.json (react-native dependency, name = @acme/mobile)
   /config.js
   /containers
     /App.js

and you start packager from root of your project:

./src/mobile/node_modules/react-native/packager/packager.sh

you can reference all files from `core` or `mobile` folder by the package.json name.

That is — as long as there’s package.json inside a folder (it does not need to be inside node_modules), packager will make it accessible by its name.

Summary

So, to sum up, instead of writing:

// mobile/containers/App.js
const todos = require(‘../../../core/todos’);
const config = require(‘../config’);

you could just:

// mobile/containers/App.js
const todos = require(‘@acme/core/todos’);
const config = require(‘@acme/mobile/config’);

or even

const todos = require(‘@acme/umbrella/src/core/todos’);

but that’s rather ugly (though it shows that you can also reference by top-most package.json name either).

To make it working inside web target, use Webpack for instance and simply alias these folders.

How nice is that!

Note: Confirmed to work as of React Native 0.17