React Native

Announcing React Native 0.60 · React Native

Announcing React Native 0.60

July 3, 2019 · 5 min read

Core Maintainer & React Native Developer

After months of hard work from hundreds of contributors, the React Native Core team is proud to announce the release of version 0.60. This release handles significant migrations for both Android and iOS platforms, and many issues are resolved too. This blog post covers the highlights of the release. As always though, refer to the changelog for more detailed information. Finally, thank you contributors for helping us to make this milestone!

Focus on Accessibility

There have been many improvements to the accessibility APIs, like announceForAccessibility, plus improvements to roles, action support, flags, and more. Accessibility is a complex science, but we hope these improvements make it a bit easier to be an A11Y. Be sure to check React Native Open Source Update June 2019 for more details of these changes.

A Fresh Start

React Native's start screen has been updated! Thank you to the many contributors who helped create the new UI. This new "Hello World" will welcome users to the ecosystem in a more friendly, engaging way.

The new init screen helps developers get started from the get-go with resources and a good example

AndroidX Support

AndroidX is a major step forward in the Android ecosystem, and the old support library artifacts are being deprecated. For 0.60, React Native has been migrated over to AndroidX. This is a breaking change, and your native code and dependencies will need to be migrated as well.

With this change, React Native apps will need to begin using AndroidX themselves. They cannot be used side-by-side in one app, so all of the app code and dependency code needs to be using one or the other.

matt-oakes on discussions-and-proposals

While your own native code will need to be migrated by you, @mikehardy, @cawfree, and @m4tt72 built a clever tool named "jetifier" to patch your node_modules . Library maintainers will need to upgrade, but this tool provide you with a temporary solution while giving them time to release an AndroidX version. So if you find errors related to AndroidX migration, give this a shot.

CocoaPods by Default

CocoaPods are now part of React Native's iOS project. If you weren't already, be sure to open iOS platform code using the xcworkspace file from now on (protip: try xed ios from the root project directory). Also, the podspec s for the internal packages have changed to make them compatible with the Xcode projects, which will help with troubleshooting and debugging. Expect to make some straightforward changes to your Podfile as part of the upgrade to 0.60 to bring this exciting support. Note that we are aware of a compatibility issue with use_frameworks! , and we're tracking an issue with workarounds and a future patch.

Lean Core Removals

WebView and NetInfo were previously extracted into separate repositories, and in 0.60 we’ve finished migrating them out of the React Native repository. Additionally, in response to community feedback about new App Store policy, Geolocation has been extracted. If you haven’t already, complete your migration by adding dependencies to react-native-webview, @react-native-community/netinfo, and @react-native-community/geolocation. If you'd like an automated solution, consider using rn-upgrade-deprecated-modules. Maintainers have made more than 100 commits to these repositories since extraction and we’re excited to see the community’s support!

Native Modules are now Autolinked

The team working on the React Native CLI has introduced major improvements to native module linking called autolinking! Most scenarios will not require the use of react-native link anymore. At the same time, the team overhauled the linking process in general. Be sure to react-native unlink any preexisting dependencies as mentioned in the docs above.

Upgrade Helper

@lucasbento, @pvinis, @kelset, and @watadarkstar have built a great tool called Upgrade Helper to make the upgrade process simpler. It helps React Native users with brownfield apps or complex customizations to see what's changed between versions. Take a look at the updated upgrading docs and try it out today for your upgrade path!

Upgrade Helper cleanly and easily shows the changes needed to migrate to a different version of React Native

A Note to Library Maintainers

Changes for AndroidX will almost certainly require updates to your library, so be sure to include support soon. If you're not able to upgrade yet, consider checking your library against the jetifier to confirm that users are able to patch your library at build time.

Review the autolinking docs to update your configs and readme. Depending on how your library was previously integrated, you may also need to make some additional changes. Check the dependencies guide from the CLI for information on how to define your dependency interface.

Thanks

While these are the highlights that we noted, there are many others to be excited about. To see all the updates, take a look at the changelog. As always, stay tuned for more news. Enjoy 0.60 in the meantime!

Stay Ahead in Today’s Competitive Market!
Unlock your company’s full potential with a Virtual Delivery Center (VDC). Gain specialized expertise, drive seamless operations, and scale effortlessly for long-term success.

Book a Meeting to Avail the Services of React Native

Meet Hermes, a new JavaScript Engine optimized for React Native · React Native

Meet Hermes, a new JavaScript Engine optimized for React Native

July 17, 2019 · 2 min read

Rachel Nabors

Documentation Engineer at Facebook

Last week at Chain React we announced Hermes, an open source JavaScript engine we’ve been working on at Facebook. It’s a small and lightweight JavaScript engine optimized for running React Native on Android. Check it out!

Hermes improves React Native performance by decreasing memory utilization, reducing download size, and decreasing the time it takes for the app to become usable or “time to interactive” (TTI).

“As we analyzed performance data, we noticed that the JavaScript engine itself was a significant factor in startup performance and download size. With this data in hand, we knew we had to optimize JavaScript performance in the more constrained environments of a mobile phone compared with a desktop or laptop. After exploring other options, we built a new JavaScript engine we call Hermes. It is designed to improve app performance, focusing on our React Native apps, even on mass-market devices with limited memory, slow storage, and reduced computing power.” —Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native

Want to get started right away? Be sure to check out our new guide to enabling Hermes in your existing React Native app in the docs!

Illustration of the Hermes and React Native logos joined into a winged fury, rising in a crashing electrical storm from a lone, glowing, presumably Android phone. Illustration by Rachel Nabors

Read article

The GAAD Pledge - Improving React Native Accessibility · React Native

The GAAD Pledge - Improving React Native Accessibility

March 8, 2021 · 2 min read

Alexandra Marlette

GAAD Pledge Open Source Accessibility Community Manager for React Native

Hello React Native Community,

In May 2020 Facebook was the first company to take the GAAD pledge, by doing so they committed to making accessibility a core part of the React Native open source project. Since May, Facebook has spent that time thoughtfully reviewing and documenting accessibility gaps within React Native. So far the gap analysis has surfaced 90 issues, all of which have been translated to GitHub issues.

Overall, we found that React Native APIs provide strong support for accessibility. However, we also found many core components do not yet fully utilize platform accessibility APIs and support is missing for some platform specific features.

The enthusiasm and diversity of contributors have always played a critical role in the development of React Native and these gaps in accessibility are great opportunities for current and new contributors. If you have been interested in contributing to React Native, we encourage you to join us in making React Native more accessible.

To recognize contributors for their effort, when an accessibility issue is closed and attached to a pull request, contributors will get a shout out on Twitter from our community manager. Contributors whose pull requests are accepted into the codebase will be highlighted in our monthly issues update on the React Native blog.

Please join us in making React Native more accessible for everyone.

How you can help:

New contributors should read the contribution guide and browse the list of 46 good first issues in the React Native GitHub.
Contributors interested in issues requiring a bit more effort should visit the project page for Improved React Native Accessibility to see the GitHub issues that need their knowledge of React Native.
Technical writers interested in updating React Native's documentation to reflect the accessibility gaps being closed should visit the React Native Docs.
Share this initiative with anyone who may be able to help!
Follow the GAAD Pledge Open Source Accessibility Community Manager for React Native on Twitter or Facebook to keep up to date on progress.

Read article

Announcing React Native 0.64 with Hermes on iOS · React Native

Announcing React Native 0.64 with Hermes on iOS

March 12, 2021 · 4 min read

Mike Grabowski

CTO and Co-Founder at Callstack

Today we’re releasing React Native 0.64 that ships with support for Hermes on iOS.

Hermes opt-in on iOS

Hermes is an open source JavaScript engine optimized for running React Native. It improves performance by decreasing memory utilization, reducing download size and decreasing the time it takes for the app to become usable or “time to interactive” (TTI).

With this release, we are happy to announce that you can now use Hermes to build on iOS as well. To enable Hermes on iOS, set hermes_enabled to true in your Podfile and run pod install .

use_react_native!(
   :path => config[:reactNativePath],
   # to enable hermes on iOS, change `false` to `true` and then install pods
   :hermes_enabled => true
)

    
   

Please keep in mind that Hermes support on iOS is still early stage. We are keeping it as an opt-in as we are running further benchmarking. We encourage you to try it on your own applications and let us know how it is working out for you!

Inline Requires enabled by default

Inline Requires is a Metro configuration option that improves startup time by delaying execution of JavaScript modules until they are used, instead of at startup.

This feature has existed and been recommended for a few years as an opt-in configuration option, listed in the Performance section of our documentation. We are now enabling this option by default for new applications to help people have fast React Native applications without extra configuration.

Inline Requires is a Babel transform that takes module imports and converts them to be inline. As an example, Inline Requires transforms this module import call from being at the top of the file to where it is used.

Before:

import {MyFunction} from 'my-module';

const MyComponent = props => {
  const result = MyFunction();

  return <Text>{result}</Text>;
};

After:

const MyComponent = props => {
  const result = require('my-module').MyFunction();

  return <Text>{result}</Text>;
};

More information about Inline Requires is available in the Performance documentation.

View Hermes traces with Chrome

Over the last year Facebook has sponsored the Major League Hacking fellowship, supporting contributions to React Native. Jessie Nguyen and Saphal Patro added the ability to use the Performance tab on Chrome DevTools to visualize the execution of your application when it is using Hermes.

For more information, check out the new documentation page.

Hermes with Proxy Support

We have added Proxy support to Hermes, enabling compatibility with popular community projects like react-native-firebase and mobx. If you have been using these packages you can now migrate to Hermes for your project.

We plan to make Hermes the default JavaScript engine for Android in a coming release so we are working to resolve the remaining issues people have when using Hermes. Please open an issue on the Hermes GitHub repo if there are remaining issues holding back your app from adopting Hermes.

React 17

React 17 does not include new developer-facing features or major breaking changes. For React Native applications, the main change is a new JSX transform enabling files to no longer need to import React to be able to use JSX.

More information about React 17 is available on the React blog.

Major Dependency Version Changes

Dropped Android API levels 16-20. The Facebook app consistently drops support for Android versions with sufficiently low usage. As the Facebook app no longer supports these versions and is React Native’s main testing surface, React Native is dropping support as well.
Xcode 12 and CocoaPods 1.10 are required
Minimum Node support bumped from 10 to Node 12
Flipper bumped to 0.75.1

Thanks

Thank you to the hundreds of contributors that helped make 0.64 possible! The 0.64 changelog includes all of the changes included in this release.

Read article

Announcing React Native 0.61 with Fast Refresh · React Native

Announcing React Native 0.61 with Fast Refresh

September 18, 2019 · 3 min read

Dan Abramov

React Core at Facebook

We’re excited to announce React Native 0.61, which includes a new reloading experience we’re calling Fast Refresh.

Fast Refresh

When we asked the React Native community about common pain points, one of the top answers was that the “hot reloading” feature was broken. It didn’t work reliably for function components, often failed to update the screen, and wasn’t resilient to typos and mistakes. We heard that most people turned it off because it was too unreliable.

In React Native 0.61, we’re unifying the existing “live reloading” (reload on save) and “hot reloading” features into a single new feature called “Fast Refresh” . Fast Refresh was implemented from scratch with the following principles:

Fast Refresh fully supports modern React , including function components and Hooks.
Fast Refresh gracefully recovers after typos and other mistakes, and falls back to a full reload when needed.
Fast Refresh doesn’t perform invasive code transformations so it’s reliable enough to be on by default.

To see Fast Refresh in action, check out this video:

Give it a try, and let us know what you think! If you prefer, you can turn it off in the Dev Menu (Cmd+D on iOS, Cmd+M or Ctrl+M on Android). Turning it on and off is instant so you can do it any time.

Here are a few Fast Refresh tips:

Fast Refresh preserves React local state in function components (and Hooks!) by default.
If you need to reset the React state on every edit, you can add a special // @refresh reset comment to the file with that component.
Fast Refresh always remounts class components without preserving state. This ensures it works reliably.
We all make mistakes in the code! Fast Refresh automatically retries rendering after you save a file. You don't need to reload the app manually after fixing a syntax or a runtime error.
Adding a console.log or a debugger statement during edits is a neat debugging technique.

Please report any issues with Fast Refresh on GitHub, and we’ll look into them.

Other Improvements

Fixed use_frameworks! CocoaPods support. In 0.60 we made some updates to integrate CocoaPods by default. Unfortunately, this broke builds using use_frameworks!. This is fixed in 0.61, making it easier to integrate React Native into your iOS projects that require building with dynamic frameworks.
Add useWindowDimensions Hook. This new Hook automatically provides and subscribes to dimension updates, and can be used instead of the Dimensions API in most cases.
React was upgraded to 16.9. This version deprecates old names for the UNSAFE _ lifecycle methods, contains improvements to act , and more. See the React 16.9 blog post for an automated migration script and more information.

Breaking Changes

Remove React .xcodeproj. In 0.60, we introduced auto-linking support via CocoaPods. We have also integrated CocoaPods into the e2e tests runs, so that from now on, we have a unified standard way of integrating RN into iOS apps. This effectively deprecates the React .xcodeproj support, and the file has been removed starting 0.61. Note: if you use 0.60 auto-linking already, you shouldn't be affected.

Thanks

Thanks to all of the contributors that helped make 0.61 possible!

To see all the updates, take a look at the 0.61 changelog.

Read article

Meet Doctor, a new React Native command · React Native

Meet Doctor, a new React Native command

November 18, 2019 · 2 min read

Lucas Bento

React Native Community

After over 20 pull requests from 6 contributors in the React Native Community, we're excited to launch react-native doctor , a new command to help you out with getting started, troubleshooting and automatically fixing errors with your development environment. The doctor command is heavily inspired by Expo and Homebrew's own doctor command with a pinch of UI inspired by Jest.

Here it is in action:

How it works

The doctor command currently supports most of the software and libraries that React Native relies on, such as CocoaPods, Xcode and Android SDK. With doctor we'll find issues with your development environment and give you the option to automatically fix them. If doctor is not able to fix an issue, it will display a message and a helpful link explaining how to fix it manually as the following:

Doctor command with a link to help on Android SDK's installation

Try it now

The doctor command is available as a part of React Native 0.62. However, you can try it without upgrading yet:

npx @react-native-community/cli doctor

What checks are currently supported

doctor currently supports the following checks:

Node.js (>= 8.3)
yarn (>= 1.10)
npm (>= 4)
Watchman (>= 4), used for watching changes in the filesystem when in development mode.

Specific to the Android environment:

Android SDK (>= 26), the software runtime for Android.
Android NDK (>= 19), the native development toolkit for Android.
ANDROID_HOME , environment variable required by the Android SDK setup.

And to the iOS environment:

Xcode (>= 10), IDE for developing, building and shipping iOS applications.
CocoaPods, library dependency management tool for iOS applications.
ios-deploy (optional), library used internally by the CLI to install applications on a physical iOS device.

Thanks

Huge thanks for the React Native Community for working on this, in particular @thymikee, @thib92, @jmeistrich, @tido64 and @rickhanlonii.

Read article

Welcome to Knowledge Base!

KB at your finger tips

React Native