React Native

React Native 0.61 Update brings a major new feature that improves the development experience.

 

Features Of React Native 0.61

In React Native 0.61, we’re binding together the current “live reloading” (reload on save) and “hot reloading” highlights into a single new feature called “Fast Refresh”. Fast Refresh consists of the following principles:

 

  1. Fast Refresh completely supports current React, including function components and Hooks.
  2. Fast Refresh recovers after typos and different missteps and falls back to a full reload when required.
  3. Fast Refresh doesn’t perform invasive code changes so it’s dependable enough to be on by default.

 

Fast Refresh

React Native has had live reloading and hot reloading for quite a while now. Live reloading would reload the whole application when it detected a code change. This would lose your present position inside the application, however, would guarantee the code was not in a broken state. Hot reloading would endeavor to “fix” simply the progressions you have made. This can be done without reloading the whole application, permitting you to see your progressions much quicker.

Hot reloading sounded great, however, it was quite buggy and didn’t work with current React features like functional components with hooks.

The React Native group has remade both of these features and combined them into the new Fast Reload feature. It is default enabled and will do what might be compared to a hot reload where possible, falling back to a full reload if it’s definitely not.

 

Upgrading to React Native 0.61

Likewise, with all React Native upgrades, it is suggested that you take a look at the diff for the recently made projects and apply these changes to your own project.

 

Update the Dependency Versions

The initial step is to upgrade the conditions in your package.json and introduce them. Remember that each React Native version is attached to a particular version of React, so ensure you update that too. You ought to likewise ensure that the react-test-renderer matches the React version. If you use it and that upgrade the metro-react-native-babel-preset and Babel versions.

 

Flow Upgrade

Initial a simple one. The version of Flow that React Native uses has been refreshed in 0.61. This implies that you need to ensure that the flow container dependency you have is set to ^0.105.0 and you have a similar worth in the [version] your .flowconfig file.

If you are using Flow for type checking in your project, this may prompt extra mistakes in your own code. The best suggestion is that you investigate the changelog for the versions in the range of 0.98 and 0.105 to perceive what may be causing them.

If you are using Typescript for type-checking your code, you can really eliminate the .flowconfig file and the flow bin dependency and ignore this bit of the diff.

If you are not using a type checker it is suggested that you can look into using one. Either choice will work, however, it is recommended to use Typescript.