HMR setup with `react-native-navigation`

Since we don't know how your project looks like, we will use one of the possible setups. If your project is structured differently, please tweak this guide according to your needs.

---

Let's assume you have index.js file which imports your screens and bootstraps the navigation. Add import 'haul/hot/patch'; at the beginning:

// index.js
+ import 'haul/hot/patch';
import { Navigation } from 'react-native-navigation';

// Screens
import Calendar from './Calendar';
import Localization from './Localization';
import Information from './Information';

Navigation.registerComponent('Calendar', () => Calendar);
Navigation.registerComponent('Localization', () => Localization);
Navigation.registerComponent('Information',() => Information);

import 'haul/hot/patch'; should be placed in the root file / entry file, since the code from this file must be executed before anything else!

Now, make the following changes:

// index.js
import 'haul/hot/patch';
import { Navigation } from 'react-native-navigation';
+ import {
+   makeHot,
+   redraw,
+   callOnce,
+   clearCacheFor
+ } from 'haul/hot';

// Screens
import Calendar from './Calendar';
import Localization from './Localization';
import Information from './Information';

- Navigation.registerComponent('Calendar', () => Calendar);
+ Navigation.registerComponent('Calendar', makeHot(() => Calendar, 'Calendar');
- Navigation.registerComponent('Localization', () => Localization);
+ Navigation.registerComponent('Localization', makeHot(() => Localization, 'Localization');
- Navigation.registerComponent('Information',() => Information);
+ Navigation.registerComponent('Information', makeHot(() => Information, 'Information');

+ if (module.hot) {
+   module.hot.accept('./Calendar.js', () => {
+     clearCacheFor(require.resolve('./Calendar.js'));
+     redraw(() => require('./Calendar.js').default, 'Calendar');
+   });
+   module.hot.accept('./Localization.js', () => {
+     clearCacheFor(require.resolve('./index.js'));
+     redraw(() => require('./Localization.js').default, 'Localization');
+   });
+   module.hot.accept('./Information.js', () => {
+     clearCacheFor(require.resolve('./index.js'));
+     redraw(() => require('./Information.js').default, 'Information');
+   });
+ }

You may need to tweak the paths according to your project structure.

Now, enable HMR from Developer menu by taping Enable Hot Reloading.