How to use symlinks in React Native projet? - react-native

Question

The symlink support is still not officially available in react-native https://github.com/facebook/metro/issues/1.
It's actually possible to use symlinks in the package.json with npm (not yarn)
{
"name": "PROJECT",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"my_module1": "file:../shared/my_module1/",
"my_module2": "file:../shared/my_module2/",
"react": "16.8.3",
"react-native": "0.59.5",
},
"devDependencies": {
"babel-jest": "24.7.1",
"jest": "24.7.1",
"metro-react-native-babel-preset": "0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
Although we will get my_module1 does not exist in the Haste module map
To fix this we could do before a metro.config.js (formerly rn-cli.config.js)
const path = require("path")
const extraNodeModules = {
/* to give access to react-native-firebase for a shared module for example */
"react-native-firebase": path.resolve(__dirname, "node_modules/react-native-firebase"),
}
const watchFolders = [
path.resolve(__dirname, "node_modules/my_module1"),
path.resolve(__dirname, "node_modules/my_module2"),
]
module.exports = {
resolver: {
extraNodeModules
},
watchFolders,
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
})
}
}
Unfortunately it doesn't work anymore on react-native 0.59 The app is reloading, but changes in the source code are not reflected in the app. Anyone has a clue to achieve this?

Answer 1

I had a similar issue and found haul.
Follow haul getting started instructions.
Add your local dependencies with file:../ e.g:
// package.json
"dependencies": {
"name-of-your-local-dependency": "file:../"
}
reinstall node_modules with yarn --force
Start the development server by yarn start (haul will replace your start script)
Run react-native run-android or/and react-native run-ios

Answer 2

None of the answers I found worked for me and it seems symlinks are not going to be supported anytime soon (see: https://github.com/facebook/metro/issues/1), so I had to do it manually.
I am using onchange npm package and running that in my local package: onchange 'dist/**/*.js' -- cp -R ./dist ../../app/node_modules/#author/packagename
That worked for me to achieve development and testing, while not breaking anything for production releases. I hope this can save my peers a few headaches.

Answer 3

After a few years working on this, we found a reliable way using yarn.
Add your local dependencies with are inside a folder file:../CompanyPackages/package e.g:
// package.json
"dependencies": {
"local-package": "file:../CompanyPackages/local-package"
}
Use a custom metro.config.js
const path = require("path")
const { mapValues } = require("lodash")
// Add there all the Company packages useful to this app
const CompanyPackagesRelative = {
"CompanyPackages": "../CompanyPackages",
}
const CompanyPackages = mapValues(CompanyPackagesRelative, (relativePath) =>
path.resolve(relativePath)
)
function createMetroConfiguration(projectPath) {
projectPath = path.resolve(projectPath)
const watchFolders = [...Object.values(CompanyPackages)]
const extraNodeModules = {
...CompanyPackages,
}
// Should fix error "Unable to resolve module #babel/runtime/helpers/interopRequireDefault"
// See https://github.com/facebook/metro/issues/7#issuecomment-508129053
// See https://dushyant37.medium.com/how-to-import-files-from-outside-of-root-directory-with-react-native-metro-bundler-18207a348427
const extraNodeModulesProxy = new Proxy(extraNodeModules, {
get: (target, name) => {
if (target[name]) {
return target[name]
} else {
return path.join(projectPath, `node_modules/${name}`)
}
},
})
return {
projectRoot: projectPath,
watchFolders,
resolver: {
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
extraNodeModules: extraNodeModulesProxy,
},
}
}
module.exports = createMetroConfiguration(__dirname)

Answer 4

You can use yalc. Yalc will simulate a package publish without actually publishing it.
Install it globally:
npm i -g yalc
In your local package:
yalc publish
In the application:
yalc add package-name && yarn
After you made some changes to the package, you can just run
yalc push
and it will automatically update every app that uses your local package

Answer 5

Could never get my own environment working using any other suggestions, but found a hack that works well (though not ideal) that can be easily set up in just a few lines of code and without changing your RN project configuration.
Use fs.watch for changes recursively in the directory where you're working on your library, and copy the updates over whenever there's been a change:
import fs from 'fs'
const srcDir = `./your-library-directory`
const destDir = `../your-destination-directory`
fs.watch("./src/", {recursive: true}, () => {
console.log('copying...')
fs.cp(srcDir, destDir, { overwrite: true, recursive: true }, function() {
console.log('copied')
})
})

Answer 6

Only two things are required.
1.yarn --force
2.yarn start
then select android for running option