Login/Register
Hot Reload not working in react-native android
Asked Answered
react-nativecreate-react-native-appwatchmanhot-reload
S

10

10

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!

Stove answered 26/3, 2018 at 9:10 Comment(5)
Use live reloading to update variables – Earnestineearnings
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. – Stove
Yes, Live reloading does both the things – Earnestineearnings
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 – Stove
Yes, it reloads all the states again – Earnestineearnings
A
19

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!

Argo answered 29/3, 2018 at 9:33 Comment(0)
B
14

Deleting the git index.lock file worked for me

rm -rf .git/index.lock

Banbury answered 2/5, 2019 at 8:4 Comment(1)
or remove project from your computer then pull from git. – Iridectomy
M
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

Miscue answered 21/8, 2019 at 7:19 Comment(2)
for me it was returning BuildConfig.DEBUG which was false. Changed to true. – Hallsy
Same for me, that's weird BuildConfig.DEBUG was false. – Crum
S
1

I did the following steps to resolve this issue:

  1. mkdir android/app/src/main/assets

  2. 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

  3. Shake android device or cmd + d in the simulator you will get a menu.

  4. Once enable and disable Hot reload.

  5. clear whatever the IP address you are using in Dev settings -> Debugging -> Debug server host & port for device.

  6. Enable Hot reloading.

  7. In terminal go to your project directory -> react-native start

  8. react-native run-android or run it directly in your android studio.

Seto answered 11/9, 2018 at 12:29 Comment(2)
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. – Cleliaclellan
--dev false creates a release bundle, doesn't it? – Hallsy
U
1

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.

Unworldly answered 22/2, 2022 at 10:31 Comment(0)
E
0

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

Elrod answered 27/8, 2019 at 6:33 Comment(0)
L
0

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.

Latashialatch answered 30/12, 2019 at 16:1 Comment(0)
T
0

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",
Toilworn answered 27/6, 2023 at 9:7 Comment(0)
S
-2

I think this is strait forward

enter image description here

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

Sacrum answered 30/12, 2021 at 9:25 Comment(0)
F
-3

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

Fimbriation answered 7/8, 2019 at 12:55 Comment(1)
This answer is the same as an older answer. – That

© 2022 - 2024 — McMap. All rights reserved.