Sunday, July 15, 2018

Enable Hot Reloading In React Native

This Post explains how to enable hot reloading in react native application. Hot Reloading feature in react native application helps to display the updated UI Content, whenever user saves anything in react native script or code.

Advantage of Hot Reloading :
You can speed up your development times by having your app reload automatically any time your code changes. 
Enable Hot Reloading In React Native


Follow the below steps to enable Hot Reloading Feature :

1. First launch your app on the device or emulator.
Command To Run React Native App :
react-native run-android

2. Then click on emulator and press CTRL + M (CMD + M on MacOS) or shake the Android device which has the running app.

3. Then select the Enable Hot Reloading option from the popup.

Enable Hot Reloading In React Native


Video Demo :



Let us know if you face any difficulties, while enabling Hot Reloading feature in react native application.



3 comments:

  1. I meet error:

    Cannot redefine property: ComponentName



    loadModuleImplementation
    require.js: 292:4

    guardedLoadModule
    require.js: 179:20

    metroRequire
    require.js: 115:72


    require.js: 362:14

    metroAcceptAll
    require.js: 361:39

    metroAccept
    require.js: 437:11

    -----------------------

    After I enable Hot Reload,
    I add Hot Reload at Component. Click save, then above error pop up.

    Any help would be appreciated.. Thanks

    ReplyDelete
  2. I'm getting the same issue, did you manage to solve this?

    ReplyDelete
    Replies
    1. Which react native version are you using and gradle version ?

      Delete