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!

Answer 1

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!

Answer 2

Deleting the git index.lock file worked for me

rm -rf .git/index.lock