Hot Reload not working in react-native android

Question

I tried it on windows 10 and Ubuntu 16.04. In both cases the Hot Reload only works with changes in jsx, but not, when I change a variabel or function or something else in javascript. The Hot Reload is enabled. Live reload is disabled. When I save a change in the Visual Studio Code Editor, the virtual Device (android studio) reloads, but the changes are not there. The same on physical device in EXPO App.

First I didn`t install watchman. Hot Relaod not working. After installing it Hot Reload not working too.

I startet the app with create-react-native-app. It is not ejected.

package.json:

{
  "name": "NativeReduxSaga",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "25.0.0",
    "react-native-debugger-open": "^0.3.17",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js",
    "postinstall": "rndebugger-open --expo"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@redux-offline/redux-offline": "^2.3.2",
    "expo": "^25.0.0",
    "prop-types": "^15.6.1",
    "react": "16.2.0",
    "react-native": "0.52.0",
    "react-native-autocomplete-input": "^3.5.0",
    "react-navigation": "^1.5.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-observable": "^0.18.0",
    "redux-promise-middleware": "^5.0.0",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.2.0",
    "rxjs": "^5.5.7"
  }
}

watchman version

{
    "version": "4.9.1",
    "buildinfo": "94e66865386e844f2cffe52e355a94c96562d2e3 2018-03-12T19:58:02.0000000Z"
}

node version v6.13.1

I read in some articles here, that it could help on Windows, to raise the MAX_WAIT_TIME. But I don´t have a \node_modules\react-native\node_modules\node-haste\lib\FileWatcher\ index.js file.

And why isn´t it working on Ubuntu , too?

Do I really need the watchman? How should it be configured? My .watchmanconfig file is an empty object like {}.

Is Hot Reload usually working with create-react-native-app?

Does anybody know what I can try here, to get the hot reload working? Thanx for an help!

Ok, thanx! So I have to switch between live or hot reload depends on changing things in varibales or functions or only jsx and styles. — fricko, Mar 26 '18 at 11:22
Ok, but with live reload the state of the whole app is back to start every time, isn´t it? It remembers not the state before the changes — fricko, Mar 26 '18 at 12:54

score 19 · Answer 1 · answered Mar 29 '18 at 09:33

Actually there's a difference between Hot and Live Reloading.

Hot Reloading is instant reload while keeping the state of your application intact. However, it only works inside the render method and is only triggered on extensions of classes React.Component and Component

As in:

class A extends Component ...
class B extends React.Component ...

Live Reload on the other hand, rebuilds your application and discards your application state. It includes everything, from variables and methods to the simplest of string. That's why one will always start from the start screen of the application (because the state is lost).

Hope it helps!

score 14 · Answer 2 · answered May 02 '19 at 08:04

14

Deleting the git index.lock file worked for me

rm -rf .git/index.lock

answered May 02 '19 at 08:04

cdvx

149
1
5

1

or remove project from your computer then pull from git. – hakki Dec 07 '20 at 22:20

score 5 · Answer 3 · answered Aug 21 '19 at 07:19

5

in android go to your MainApplication.Java search for @Override public boolean getUseDeveloperSupport() { return true; }

Make sure it returns true. It might be the issue

answered Aug 21 '19 at 07:19

Joseph Gichuru

59
1
5

for me it was returning `BuildConfig.DEBUG` which was false. Changed to true. – Mando Jun 19 '20 at 00:32
Same for me, that's weird BuildConfig.DEBUG was false. – Amir Saadallah Apr 09 '22 at 13:37

score 1 · Answer 4 · edited Sep 11 '18 at 19:41

1

I did the following steps to resolve this issue:

mkdir android/app/src/main/assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Shake android device or cmd + d in the simulator you will get a menu.
Once enable and disable Hot reload.
clear whatever the IP address you are using in Dev settings -> Debugging -> Debug server host & port for device.
Enable Hot reloading.
In terminal go to your project directory -> react-native start
react-native run-android or run it directly in your android studio.

edited Sep 11 '18 at 19:41

ChrisR

3,922
1
14
24

answered Sep 11 '18 at 12:29

Raj Kiran

152
1
9

On real devices, if i remove the IP to the metro bundler, it will throw so many errors saying that can't connect to the server. How is that going to be helpful? It doesn't work. – msqar Aug 01 '19 at 12:51
`--dev false` creates a release bundle, doesn't it? – Mando Jun 19 '20 at 00:42

score 1 · Answer 5 · answered Feb 22 '22 at 10:31

Alternative solution:

  "scripts": {
-    "start": "react-native-scripts start",
+    "start": "DEBUG=true react-native-scripts start",
  },

To have it work, you should make sure this file wasn't changed:

// ./android/app/src/main/java/com/cubyn/storage/MainApplication.java

...
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
...

IMHO it's a better solution because it will be enabled only during dev, and not when bundled for production.

score 0 · Answer 6 · answered Aug 27 '19 at 06:33

For me the problem was with the AndroidX, basically some time you need to migrate to AndroidX due to the react-native old versions

just open your project in the Android Studio

Refactor -> Migrate to Android X ... and flow the instructions

and don't avoid to make backup when it will be promoted for save side

score 0 · Answer 7 · edited Jun 20 '20 at 09:12

For anyone experiencing this problem when using WSL 2, the files need to exist inside of the Linux subsystem instead of inside any mounted Windows folders for the file watching to work properly. Taken from this post on Reddit:

They changed the file sharing protocol, from using they own custom developed protocol to using the 9P protocol, which at this time might not support file changes event.

I believe you can fix this issue by putting your code on the Linux file system (ex: in your user's home directory), and access these files through the WSL share, \wsl$\DISTRO_NAME from Windows.

In the Windows explorer, if you go to \wsl$, you should see all your WSL Linux distros installed and can access all the files on their file systems.

score 0 · Answer 8 · answered Jun 27 '23 at 09:07

For me it works by exposing 8081 port on your Android device and respectively on your computer:

  "scripts": {
    "start": "watchman watch-del-all && yarn run android:network && react-native start --reset-cache",
    "react:link": "react-native link",
    "android": "react-native run-android && yarn run android:network",
    "android:network": "adb reverse tcp:8081 tcp:8081 2>&1 || true",

Yunat Amos · Answer 9 · 2021-12-30T09:41:00.707

-2

I think this is strait forward

Also dont forget to run npm start in your text editor and not outside editor like git bash

edited Dec 30 '21 at 09:41

answered Dec 30 '21 at 09:25

Yunat Amos

93
4

score -3 · Answer 10 · answered Aug 07 '19 at 12:55

-3

Make sure you don't have an index.lock file in your .git directory :) Deleting it could solve your issue.

answered Aug 07 '19 at 12:55

Nathan Simpson

27
5

This answer is the same as an [older answer](https://stackoverflow.com/a/55948057/5320601). – Lomtrur Aug 07 '19 at 13:12

Hot Reload not working in react-native android

10 Answers10