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
Today we are excited to release React Native 0.76! This is a major milestone for React Native, with the New Architecture enabled by default, and the new React Native DevTools. This has been the culmination of 6 years of hard work from our incredible community of developers to make this day happen.
8
+
Today we are excited to release React Native 0.76! This is a major milestone for React Native, with the New Architecture enabled by default, and the new React Native DevTools. This has been the culmination of 6 years of hard work from our incredible community of developers.
9
9
10
10
### Highlights
11
11
12
-
-[React Native New Architecture by default](#react-native-new-architecture-by-default)
13
-
-[React Native DevTools](#react-native-devtools)
14
-
-[Box Shadow and Filter style props](#box-shadow-and-filter-style-props)
12
+
-[React Native New Architecture by default](/blog/2024/10/23/release-0.76-new-architecture#react-native-new-architecture-by-default)
-[Box Shadow and Filter style props](/blog/2024/10/23/release-0.76-new-architecture#box-shadow-and-filter-style-props)
15
15
16
16
### Breaking Changes
17
17
18
-
-[Removed the dependency on the react-native-community/cli](#removed-the-dependency-on-the-react-native-communitycli)
19
-
-[[Android] React Native C++ code is distributed as libreactnative.so](#android-react-native-is-distributed-as-a-single-library)
20
-
-[Updates to Minimum iOS and Android SDK requirements](#updates-to-minimum-ios-and-android-sdk-requirements)
18
+
-[Removed the dependency on the react-native-community/cli](/blog/2024/10/23/release-0.76-new-architecture#removed-the-dependency-on-the-react-native-communitycli)
19
+
-[[Android] React Native C++ code is distributed as libreactnative.so](/blog/2024/10/23/release-0.76-new-architecture#android-react-native-is-distributed-as-a-single-library)
20
+
-[Updates to Minimum iOS and Android SDK requirements](/blog/2024/10/23/release-0.76-new-architecture#updates-to-minimum-ios-and-android-sdk-requirements)
21
21
22
22
<!--truncate-->
23
23
24
24
## Highlights
25
25
26
26
### React Native New Architecture by default
27
27
28
-
The New Architecture is finally here and starting from 0.76 is enabled by default in your projects.
28
+
The New Architecture is here. Starting from 0.76 the New Architecture is enabled by default in your projects.
29
29
30
-
Thanks to our collaboration with the whole community, we feel now confident to make this step. We verified that more than [880 libraries](https://reactnative.directory/?newArchitecture=true) are compatible with the New Architecture, including all the Expo Modules.
30
+
Thanks to the community's validation and testing, we now feel confident making this change. We verified that more than [880 libraries](https://reactnative.directory/?newArchitecture=true) are compatible with the New Architecture, including all the Expo Modules in the Expo SDK. We also worked with companies like [BlueSky](https://github.com/bluesky-social/social-app/releases/tag/1.92.0-na-rc.2) and [Kraken](https://blog.kraken.com/product/engineering/kraken-new-architecture) to validate the app migration, and they are already using it in production.
31
31
32
-
To make sure your experience with the New Architecture will be great, we worked with [BlueSky](https://github.com/bluesky-social/social-app/releases/tag/1.92.0-na-rc.2) and Kraken who are already using it in production.
33
-
34
-
This change will be completely transparent to you: by upgrading to version 0.76, following the instruction in the [upgrade helper](https://react-native-community.github.io/upgrade-helper/?from=0.75.4&to=0.76.0), you’ll also be turning on the New Architecture. We don’t expect any changes in behaviors in your app.
32
+
This change will be completely transparent to you. Upgrade to version 0.76 by following the instructions in the [upgrade helper](https://react-native-community.github.io/upgrade-helper/?from=0.75.4&to=0.76.0), and the New Architecture will be enabled by default. We don’t expect any changes in behaviors in your app.
35
33
36
34
If for any reason you can’t move to the New Architecture, you can still opt-out from it.
37
35
38
-
On Android, you can modify the `gradle.properties` file and turn the `newArchEnabled` flag to `false`.
36
+
-On Android, you can modify the `gradle.properties` file and turn the `newArchEnabled` flag to `false`.
39
37
40
38
```diff
41
39
-newArchEnabled=false
42
40
+newArchEnabled=false
43
41
```
44
42
45
-
On iOS, you can opt-out from the New Architecture by installing Cocoapods dependencies with the command:
43
+
-On iOS, you can opt-out from the New Architecture by installing Cocoapods dependencies with the command:
46
44
47
45
```bash
48
46
RCT_NEW_ARCH_ENABLED=0 bundle exec pod install
49
47
```
50
48
51
-
As part of the work to make the New Architecture the default, we also revamped most sections of the [website](https://reactnative.dev) to reflect these changes. If you need the documentation of the [Legacy Native Modules](https://reactnative.dev/docs/0.76/legacy/native-modules-intro) and [Legacy Native Components](https://reactnative.dev/docs/0.76/legacy/native-components-android), you can find it in the Legacy Architecture section. Otherwise, the rest of the website assumes that you are looking for New Architecture documentation.
49
+
As part of the work to make the New Architecture the default, we also revamped most sections of the website to reflect these changes. If you need the documentation of the [Legacy Native Modules](/docs/next/legacy/native-modules-intro) and [Legacy Native Components](/docs/next/legacy/native-components-android), you can find it in the Legacy Architecture section. Otherwise, the rest of the website **assumes that you are looking for New Architecture documentation**.
52
50
53
51
### React Native DevTools
54
52
@@ -65,18 +63,20 @@ Key features:
65
63
-**Instant launch** — React Native DevTools is ready by default with zero config. Open from the in-app Dev Menu or via <kbd>j</kbd> to debug in the CLI server, which now supports multiple emulators and devices.
66
64
67
65
React Native DevTools is fundamentally different from our previous debugging options, including being different from the Experimental Debugger experience first shipped in 0.73. It switches to a new backend debugging stack that we’ve rebuilt from the ground up over the last year, in partnership with the Hermes team. This means that compatibility with previous tooling [has changed](https://github.com/react-native-community/discussions-and-proposals/discussions/819#:~:text=announcement%20talk%20%F0%9F%8E%AC.-,Compatibility,-React%20Native%20DevTools), and you should also expect a much more reliable experience end-to-end. These foundational improvements will support the addition of future features that we're keen to bring to users, such as the Performance and Network panels.
68
-
Phasing out logs in Metro
66
+
67
+
#### Phasing out logs in Metro
68
+
69
69
In our next release, we’re also removing forwarded logs in Metro. We are doing this to align with modern browser tooling and to remove old, non-CDP, debugging integrations. Streamed application logs are not a pattern in web bundlers or in native build tools, and these are neither well-formatted nor searchable. Instead, please use React Native DevTools and its fully featured Console panel. See more under our [FAQs](https://github.com/react-native-community/discussions-and-proposals/discussions/819#:~:text=point%20is%20deprecated.-,FAQs,-React%20Native%20DevTools).
-[Announcement talk at React Universe Conf](https://www.youtube.com/watch?v=OwivVpg6Luc)
75
75
-[Feedback thread and FAQs](https://github.com/react-native-community/discussions-and-proposals/discussions/819)
76
76
77
77
### Box Shadow and Filter style props
78
78
79
-
We’ve added two New-Architecture-only style props in 0.76 - `boxShadow` and `filter`. Both of these props exist on the web, and the team tried to stick to the specs when possible so that these props are predictable, familiar, and ultimately easier to adopt. As a result you can look up the web documentation to fully understand how these work, but there are a few important differences which are noted below.
79
+
We’ve added two NewArchitectureonly style props in 0.76 - `boxShadow` and `filter`. Both of these props exist on the web, and the team tried to stick to the specs when possible so that these props are predictable, familiar, and ultimately easier to adopt. As a result, you can look up the web documentation to fully understand how these work, but there are a few important differences which are noted below.
80
80
81
81
#### `boxShadow`
82
82
@@ -86,15 +86,15 @@ We’ve added two New-Architecture-only style props in 0.76 - `boxShadow` and `f
86
86
87
87
`boxShadow` can take either a string, which mimics the CSS syntax, or JS objects which can embed variables. For example the string `‘5 5 5 0 rgba(255, 0, 0, 0.5)’` and the object `{offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: ‘rgba(255, 0, 0, 0.5)’}` would yield the same box shadow.
88
88
89
-
The difference between `boxShadow` and the [existing shadow functionality](https://reactnative.dev/docs/shadow-props) is existing shadows:
89
+
There are some difference between the new `boxShadow` and the [existing shadow functionality](https://reactnative.dev/docs/shadow-props):
90
90
91
-
-Do not work on Android
91
+
-Does not work on Android
92
92
- Cannot be [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#inset)
93
-
-Do not have [spread](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#length)
94
-
-Do not work on `View`s if there is no background color
95
-
-Are separate props, so they cannot share web syntax
93
+
-Does not have [spread](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#length)
94
+
-Does not work on `View`s if there is no background color
95
+
-Is a separate prop, so it cannot share the same web syntax
96
96
97
-
**Limitations & Spec Deviations**
97
+
#### Limitations & Spec Deviations
98
98
99
99
- The default shadow color is black, not the parent’s color
100
100
- Android normal shadows are supported on **Android 9+**
@@ -104,14 +104,15 @@ The difference between `boxShadow` and the [existing shadow functionality](https
104
104
105
105
`filter` adds certain graphical filters to an element. There are a mix of color filters that let you modify things like brightness, saturation, and hue as well as non-color filters that let you add blurs and shadows. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) for a full overview of each individual filter function, along with a fiddle to try them out for yourself. Below is a hot dog image with various filters applied to it.
106
106
107
-
108
-
109
-
<palign="center">From left to right: no filter, `saturate` filter, `blur` filter, `invert` filter</p>
<figcaption>From left to right: no filter, <code>saturate</code> filter, <code>blur</code> filter, <code>invert</code> filter</figcaption>
110
+
</figure>
110
111
111
112
Like `boxShadow`, `filter` can take either a string, which mimics the CSS syntax, or an array of JS objects which can embed variables. For example the string `‘saturate(0.5) grayscale(0.25)’` and the array `[{saturate: 0.5}, {grayscale: 0.25}]` would yield the same filter.
112
113
`filter` has a `dropShadow` value which varies slightly from `boxShadow`. The biggest difference is that `dropShadow` is an alpha mask - so the shadow will only be cast by a pixel if it has a nonzero alpha component. `boxShadow`, on the other hand, will cast around the border box of the element, even if nothing is inside of it. Additionally, dropShadow does not have a spread distance parameter and cannot be inset (shadow cast inside of the element).
113
114
114
-
**Limitations and Spec Deviations**
115
+
#### Limitations and Spec Deviations
115
116
116
117
- iOS `filter` only supports brightness and opacity
117
118
- iOS `filter` will not apply to shadows, outlines, or any other graphical elements outside the bounds of the element
@@ -132,9 +133,9 @@ If you are relying on the CLI in your daily workflow, make sure to explicitly [a
This change was announced earlier in the year when 0.75 [was released](https://reactnative.dev/blog/2024/08/12/release-0.75#last-version-supporting-minsdk-23-and-miniosversion-134). For more background, please see the dedicated posts for [Android](https://github.com/react-native-community/discussions-and-proposals/discussions/802) and [iOS](https://github.com/react-native-community/discussions-and-proposals/discussions/812).
177
+
This change was announced earlier in the year when 0.75 [was released](/blog/2024/08/12/release-0.75#last-version-supporting-minsdk-23-and-miniosversion-134). For more background, please see the dedicated posts for [Android](https://github.com/react-native-community/discussions-and-proposals/discussions/802) and [iOS](https://github.com/react-native-community/discussions-and-proposals/discussions/812).
0 commit comments