blog: add feedback from PR

website/blog/2024-10-23-release-0.76-new-architecture.md

@@ -1,54 +1,52 @@
 ---
 title: 'React Native 0.76 - New Architecture by default, React Native DevTools, Box Shadows and more'
 authors: [blakef, cipolleschi, frankcalise, gabrieldonadel]
-tags: [engineering]
+tags: [announcement, release]
 date: 2024-10-23
 ---
 
-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.
+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.
 
 ### Highlights
 
-- [React Native New Architecture by default](#react-native-new-architecture-by-default)
-- [React Native DevTools](#react-native-devtools)
-- [Box Shadow and Filter style props](#box-shadow-and-filter-style-props)
+- [React Native New Architecture by default](/blog/2024/10/23/release-0.76-new-architecture#react-native-new-architecture-by-default)
+- [React Native DevTools](/blog/2024/10/23/release-0.76-new-architecture#react-native-devtools)
+- [Box Shadow and Filter style props](/blog/2024/10/23/release-0.76-new-architecture#box-shadow-and-filter-style-props)
 
 ### Breaking Changes
 
-- [Removed the dependency on the react-native-community/cli](#removed-the-dependency-on-the-react-native-communitycli)
-- [[Android] React Native C++ code is distributed as libreactnative.so](#android-react-native-is-distributed-as-a-single-library)
-- [Updates to Minimum iOS and Android SDK requirements](#updates-to-minimum-ios-and-android-sdk-requirements)
+- [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)
+- [[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)
+- [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)
 
 <!--truncate-->
 
 ## Highlights
 
 ### React Native New Architecture by default
 
-The New Architecture is finally here and starting from 0.76 is enabled by default in your projects.
+The New Architecture is here. Starting from 0.76 the New Architecture is enabled by default in your projects.
 
-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.
+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:/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.
 
-To make sure your experience with the New Architecture will be great, we worked with [BlueSky](https:/bluesky-social/social-app/releases/tag/1.92.0-na-rc.2) and Kraken who are already using it in production.
-
-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.
+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.
 
 If for any reason you can’t move to the New Architecture, you can still opt-out from it.
 
-On Android, you can modify the `gradle.properties` file and turn the `newArchEnabled` flag to `false`.
+- On Android, you can modify the `gradle.properties` file and turn the `newArchEnabled` flag to `false`.
 
 ```diff
 -newArchEnabled=false
 +newArchEnabled=false
 ```
 
-On iOS, you can opt-out from the New Architecture by installing Cocoapods dependencies with the command:
+- On iOS, you can opt-out from the New Architecture by installing Cocoapods dependencies with the command:
 
 ```bash
 RCT_NEW_ARCH_ENABLED=0 bundle exec pod install
 ```
 
-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.
+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**.
 
 ### React Native DevTools
 
@@ -65,18 +63,20 @@ Key features:
 - **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.
 
 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:/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.
-Phasing out logs in Metro
+
+#### Phasing out logs in Metro
+
 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:/react-native-community/discussions-and-proposals/discussions/819#:~:text=point%20is%20deprecated.-,FAQs,-React%20Native%20DevTools).
 
 **Links**
 
-- [Updated debugging docs](https://reactnative.dev/docs/debugging)
+- [Updated debugging docs](/docs/debugging)
 - [Announcement talk at React Universe Conf](https://www.youtube.com/watch?v=OwivVpg6Luc)
 - [Feedback thread and FAQs](https:/react-native-community/discussions-and-proposals/discussions/819)
 
 ### Box Shadow and Filter style props
 
-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.
+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.
 
 #### `boxShadow`
 
@@ -86,15 +86,15 @@ We’ve added two New-Architecture-only style props in 0.76 - `boxShadow` and `f
 
 `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.
 
-The difference between `boxShadow` and the [existing shadow functionality](https://reactnative.dev/docs/shadow-props) is existing shadows:
+There are some difference between the new `boxShadow` and the [existing shadow functionality](https://reactnative.dev/docs/shadow-props):
 
-- Do not work on Android
+- Does not work on Android
 - Cannot be [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#inset)
-- Do not have [spread](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#length)
-- Do not work on `View`s if there is no background color
-- Are separate props, so they cannot share web syntax
+- Does not have [spread](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#length)
+- Does not work on `View`s if there is no background color
+- Is a separate prop, so it cannot share the same web syntax
 
-**Limitations & Spec Deviations**
+#### Limitations & Spec Deviations
 
 - The default shadow color is black, not the parent’s color
 - Android normal shadows are supported on **Android 9+**
@@ -104,14 +104,15 @@ The difference between `boxShadow` and the [existing shadow functionality](https
 
 `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.
 
-![From left to right: no filter, saturate filter, blur filter, invert filter](../static/blog/assets/0.76-filter-example.png)
-
-<p align="center">From left to right: no filter, `saturate` filter, `blur` filter, `invert` filter</p>
+<figure>
+ <img alt="Filters demonstration" src="/blog/assets/0.76-filter-example.png" />
+ <figcaption>From left to right: no filter, <code>saturate</code> filter, <code>blur</code> filter, <code>invert</code> filter</figcaption>
+</figure>
 
 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.
 `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).
 
-**Limitations and Spec Deviations**
+#### Limitations and Spec Deviations
 
 - iOS `filter` only supports brightness and opacity
 - 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
 //…
  “devDependencies”: {
  // …
- + “@react-native-community/cli”: “15.0.0”,
- + "@react-native-community/cli-platform-android": “15.0.0”,
- + "@react-native-community/cli-platform-ios": “15.0.0”,
++  “@react-native-community/cli”: “15.0.0”,
++  "@react-native-community/cli-platform-android": “15.0.0”,
++  "@react-native-community/cli-platform-ios": “15.0.0”,
  },
 ```
 
@@ -145,7 +146,7 @@ This change comes with reduction in app size, and improvement in app startup per
 
 On the other hand, this is a breaking change for both app and library developers.
 
-App developers will have to update their Application’s onCreate as follows:
+App developers will have to update their Application’s `onCreate` as follows:
 
 ```diff
 +import com.facebook.react.soloader.OpenSourceMergedSoMapping
@@ -173,7 +174,7 @@ We have updated our minimum platform and SDK versions:
 - iOS: [15.1](https://support.apple.com/en-gb/108051#151)
 - Android: [SDK 24](https://developer.android.com/tools/releases/platforms#7.0) (Android 7)
 
-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:/react-native-community/discussions-and-proposals/discussions/802) and [iOS](https:/react-native-community/discussions-and-proposals/discussions/812).
+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:/react-native-community/discussions-and-proposals/discussions/802) and [iOS](https:/react-native-community/discussions-and-proposals/discussions/812).
 
 ### Other Breaking Changes