website/blog/2023-01-12-version-071.md
Today we’re releasing React Native version 0.71! This is a feature-packed release including:
In this post we’ll cover some of the highlights of 0.71.
<!--truncate-->:::info For a full list of changes, check out CHANGELOG.md. :::
In this release, we’re investing in the TypeScript experience of React Native.
Starting with 0.71, when you create a new React Native app via the React Native CLI you'll get a TypeScript app by default. The new project is already set up with a tsconfig.json so out of the box your IDE will help you write typed code right away.
We’re also offering built-in, more accurate TypeScript declarations directly from the react-native package. This means you won’t need @types/react-native any longer, and the types will be updated in lockstep with React Native releases.
Finally, our documentation has been updated to feature TypeScript for all examples.
:::note
After upgrading to React Native 0.71, we recommend removing @types/react-native from your package.json devDependencies.
:::
For more details on this change, including migration steps and how this affects Flow users, check out our previous post First-class Support for TypeScript.
With React Native you can flexibly layout components on different screen sizes using Flexbox. Browsers have supported the Flexbox properties gap, rowGap, and columnGap, which allow you to specify the amount of space between all items in a Flexbox.
These properties have been long requested in React Native, and 0.71 adds initial support for gaps defined using pixel values. In future versions, we will add support for more values, such as percentages.
To see why this is useful, imagine trying to build a responsive layout with variably sized cards, 10px apart from each other, hugging the edges of the parent container. Trying to accomplish this layout with child margins can be tricky.
The following shows a layout where we start by giving each child margin: 10 style:
Margins are applied uniformly to the edges of all children and don’t collapse under Flexbox, giving us spacing at the exterior of the cards, and double the space on the interior compared to what we wanted. We can get around this by applying non-uniform margins, using negative margins on the parent, halving our intended spacing, etc, but it can be made much easier.
With flex gap, this layout can be achieved by setting gap: 10 on the container for a 10 pixel gap between the interior of the cards:
For more information on Flexbox gaps, see this blogpost from CSS Tricks.
This release includes a number of new props inspired by web standards to align React Native’s APIs across many platforms. These new props are purely additive so there are no expected migrations or change of behavior for equivalent accessibility, behavior, or style props.
For any new prop alias introduced, if there is an existing prop with a different name and both are specified, the new alias prop value will take precedence. For example, this release adds a src prop alias for source on the Image component to align with the src prop on web. If both src and source are provided, the new src prop will be used.
:::note
For more background on aligning React Native to web standards, check out this proposal and related discussion. :::
We introduced ARIA props as alias to existing React Native accessibility props.
These props now exist on all core components of React Native:aria-label, aria-labelledby,aria-modal, id, aria-busy, aria-checked, aria-disabled, aria-expanded, aria-selected, aria-valuemax, aria-valuemin, aria-valuenow, and aria-valuetext.
We also introduced equivalent web behavior for: aria-hidden, aria-live, role, and tabIndex.
See this issue for more details.
There were also props introduced to align prop names with equivalent DOM prop names for core components.
alt, tintColor, crossOrigin, height, referrerPolicy, src, srcSet, and width.autoComplete, enterKeyHint, inputMode, readOnly, and rows.See this issue for more details.
To align with certain CSS styles, there have been feature extensions for the following styles:
aspectRatio now supports string valuesfontVariant now supports space-separated string valuesfontWeight now supports number valuestransform now supports string valuesThe following aliases have been added to shadow existing React Native styles:
See this issue for more details.
Finally, we also added an opt-in implementation of PointerEvents
Once enabled, the following handlers on View will support hover:
onPointerOver, onPointerOutonPointerEnter, onPointerLeaveThese events are also implemented in Pressability for new opt-in support for hover.
To enable these features, set the following flags to true:
import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
// enable the JS-side of the w3c PointerEvent implementation
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;
// enable hover events in Pressibility to be backed by the PointerEvent implementation.
// shouldEmitW3CPointerEvents should also be true
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
() => true;
:::note
You’ll also need to enable React feature flags on your Android and iOS native setup.
:::
Check out our dedicated PointerEvents post to learn more.
React Native’s prop types, such as ViewPropTypes and Text.propTypes, were deprecated in 0.66 and accessing them would output deprecation warnings. When they were removed in 0.68, many developers began experiencing errors when upgrading to the latest version of React Native.
After some investigation, we realized that a couple issues prevented the community from taking action on the deprecation warnings. First, the deprecation warning was not always actionable which caused people to ignore them (issue one, issue two). Second, the deprecation warnings were being incorrectly filtered by LogBox.ignoreLogs. Both of these have now been fixed, but we want to give people more time to upgrade the deprecated call sites.
So in this release we are adding back React Native’s propTypes so that it is easier for people to upgrade and migrate their code to avoid using them. The deprecated-react-native-prop-types package has also been updated for all of the props in 0.71. In the future, we plan to proceed with the deprecation and remove prop types once again. We expect that when we revisit the removal, the community will experience significantly fewer issues.
:::caution
As part of this change, we are also removing the console filtering from LogBox.ignoreLog. This means logs that you have previously filtered with Logbox.ignoreLog will start appearing again in the console when you upgrade.
This is expected, because it allows logs such as deprecation warnings to be found and fixed. :::
In this release, we've brought two popular React DevTools features on web to React Native.
"Click to inspect" is the option in the top left corner of React Dev Tools that allows you to click on an item in the app to inspect it in Dev Tools, similar to the Chrome element inspector.
Component highlighting will highlight the element you select in DevTools in the app so you can see which React components line up with which on-screen elements.
Here are both features in action:
In React Native 0.70, we made Hermes the default engine for React Native.
In React Native 0.71, we’re upgrading Hermes with a few notable improvements:
JSON.parse performance: This version includes a performance optimization that improves the performance of JSON.parse up to 30%..at(): Hermes now supports.at() for String, TypedArray, and Array.For a full list of changes see the Road to 71 issue.
This release brings many improvements to the experimental New Architecture experience based on user feedback and reports we collected so far.
RCTAppDelegate class, which will simplify upgrades in the future with fewer manual breaking changes.install_module_dependencies function to call inside your package podspec which will install all the required dependencies for the New Architecture.As a reminder, the New Architecture is still an experimental API experience as we iterate on changes to make adoption easier. Please try out the new simplified steps in the New Architecture documentation and post any feedback you have to the New Architecture Working Group.
LogBox.ignoreLog no longer filters console logs. This means you will start seeing logs in the console that you have silenced in LogBox. See this comment for more details.This release is possible thanks to the work of 70+ contributors adding over 1000 commits.
We especially want to thank those who contributed to these major React Native projects:
Finally, thanks to @cortinico, @kelset, @dmytrorykun, @cipolleschi, and @titozzz for cutting this release!
For React Native CLI users, see the upgrade documentation for how to update your existing project, or create a new project with npx react-native init MyProject.
React Native version 0.71 will be supported in Expo SDK version 48.
:::info 0.71 is now the latest stable version of React Native and 0.68.x versions are now unsupported. For more information see React Native’s support policy. :::