You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To keep updates focused on the target audience, we are moving New Architecture updates in 0.72, and future releases, to this working group.
This change will allow us to share more frequent updates, such as work that ships in our nightlies. General updates for 0.72 will continue to be shared in the release blog post.
New Renderer Interop Layer
0.72 is the first version of React Native that ships with a interoperability layer for Fabric. This means that you can now reuse legacy Native Components in New Architecture apps, without the need for them to be migrated.
We believe this mechanism will allow for better incremental adoption of the New Architecture.
Experimental CSS aliases available for New Architecture
Continuing the work on adding web-inspired props, we’ve added more CSS aliases. These are only available for the New Architecture. We have moved the TypeScript types for these properties under a dedicated “experimental” type definition to reduce confusion.
To use these types you three options:
Update your tsconfig.json to include "react-native/types/experimental" under the types array.
Our work on New Architecture continues to prioritize widespread adoption in the ecosystem. With support from early adopters, there has been critical analysis and feedback on rendering performance with the New Architecture. Our team investigated this feedback and created our own benchmarks to identify some performance gaps around the Text component.
In 0.72, we have landed fixes to improve Text rendering performance for both iOS and Android. By our benchmarks, rendering speed increased by 27% on iOS and 18% on Android. You can read more about our benchmarks and investigation in Samuel’s post.
Add support for use_frameworks! in Fabric
A blocker for New Architecture adoption in iOS was the lack of support for Frameworks. Specifically, the new renderer is not compatible with this option, which is widely used by the iOS community and required by some commonly used libraries, like Firebase. In this release, we refactored our Cocoapods setup and dependencies to enable statically linked frameworks when using the New Architecture.
In brief, you can now build the New Architecture with use_frameworks! :linkage => :static;
This change is technically breaking, as we changed some files of the internals and third party libraries may refer to some of these headers which may have changed their location. However, React Native offers some tools that we built to hide these changes: the RCTAppDelegate class and the ruby install_modules_dependencies function. If you are using those functions, nothing should break. If that’s not the case, you can find more information and instructions in this post.
We are also tracking the state of use_frameworks! across versions of React Native. You can find the table here.
Breaking changes for React Native CLI config
androidMkPath has been removed from React Native CLI. If you have a react-native.config.js and specify androidMkPath in the dependencies, you can now delete that field.
Since 0.70, React Native supports CMake for build configuration, and the Android.mk files have been removed from the React Native template. See this pull request for more details.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
To keep updates focused on the target audience, we are moving New Architecture updates in 0.72, and future releases, to this working group.
This change will allow us to share more frequent updates, such as work that ships in our nightlies. General updates for 0.72 will continue to be shared in the release blog post.
New Renderer Interop Layer
0.72 is the first version of React Native that ships with a interoperability layer for Fabric. This means that you can now reuse legacy Native Components in New Architecture apps, without the need for them to be migrated.
We believe this mechanism will allow for better incremental adoption of the New Architecture.
You can read more about this layer in the dedicated post we wrote about it here.
Experimental CSS aliases available for New Architecture
Continuing the work on adding web-inspired props, we’ve added more CSS aliases. These are only available for the New Architecture. We have moved the TypeScript types for these properties under a dedicated “experimental” type definition to reduce confusion.
To use these types you three options:
tsconfig.json
to include"react-native/types/experimental"
under thetypes
array.experimental.d.ts
import
statement, you can also reference a type through a referenceHere are the CSS aliases we’ve added in 0.72
borderBlockColor
borderTopColor
,borderBottomColor
borderBlockEndColor
borderBottomColor
borderBlockStartColor
borderTopColor
marginInlineStart
marginStart
marginInline
marginHorizontal
marginInlineEnd
marginEnd
marginBlockStart
marginTop
marginBlockEnd
marginBottom
marginBlock
marginVertical
paddingInlineStart
paddingStart
paddingInlineEnd
paddingEnd
paddingBlockStart
paddingTop
paddingBlockEnd
paddingBottom
paddingBlock
paddingVertical
paddingInline
paddingHorizontal
borderEndEndRadius
borderBottomEndRadius
borderEndStartRadius
borderBottomStartRadius
borderStartEndRadius
borderTopEndRadius
borderStartStartRadius
borderTopStartRadius
Rendering benchmarks and improvements
Our work on New Architecture continues to prioritize widespread adoption in the ecosystem. With support from early adopters, there has been critical analysis and feedback on rendering performance with the New Architecture. Our team investigated this feedback and created our own benchmarks to identify some performance gaps around the
Text
component.In 0.72, we have landed fixes to improve
Text
rendering performance for both iOS and Android. By our benchmarks, rendering speed increased by 27% on iOS and 18% on Android. You can read more about our benchmarks and investigation in Samuel’s post.Add support for
use_frameworks!
in FabricA blocker for New Architecture adoption in iOS was the lack of support for Frameworks. Specifically, the new renderer is not compatible with this option, which is widely used by the iOS community and required by some commonly used libraries, like Firebase. In this release, we refactored our Cocoapods setup and dependencies to enable statically linked frameworks when using the New Architecture.
In brief, you can now build the New Architecture with
use_frameworks! :linkage => :static
;This change is technically breaking, as we changed some files of the internals and third party libraries may refer to some of these headers which may have changed their location. However, React Native offers some tools that we built to hide these changes: the
RCTAppDelegate
class and the rubyinstall_modules_dependencies
function. If you are using those functions, nothing should break. If that’s not the case, you can find more information and instructions in this post.We are also tracking the state of
use_frameworks!
across versions of React Native. You can find the table here.Breaking changes for React Native CLI config
androidMkPath
has been removed from React Native CLI. If you have areact-native.config.js
and specifyandroidMkPath
in the dependencies, you can now delete that field.Since 0.70, React Native supports CMake for build configuration, and the
Android.mk
files have been removed from the React Native template. See this pull request for more details.Beta Was this translation helpful? Give feedback.
All reactions