React Native Hot reload #
One of the most important features of react-native is the hot reload. The possibility of changing your code, and, in milliseconds, be able to see your changes is a game changer on productivity, while developing native mobile applications.
However, it could also be challenging when our code starts growing and when we are talking about mono repositories. We want our changes to, automatically, appear in our devices or simulators when we update a library in our mono repository.
I have reported some problems with it here, here and here. Usually, I use WML to copy the needed libraries to the correspoding node_modules, since the metro bundler and watchman does not work very well with yarn link, which is used by lerna to link the libraries in our mono repository, accordingly to our dependency graph. On the other hand, links work very well with react web applications.
In the end, I wanted to keep the capability of hot reload without the need for another tool, in this case WML. WML has been a great helper, but it is another tool developers will need to manage.
After experimenting for a while and reading some stuff through the webs, here, here and here, I got to the following solution, which seems to be working well:
Updated packages/mobile/metro.config.js:
const path = require('path');
const watchFolders = [
path.resolve(__dirname + '/../../node_modules'),
path.resolve(__dirname + '/..'),
];
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
watchFolders,
};
I am here adding some folders for metro to watch in regard to changes. I added the root node_modules because yarn workspace hoists our libraries to the root of the workspace, and packages because this is where the changes will be happening.
It seems to be working well, but only with time it could be confirmed.
Published