feat: 0.76 Release Blog Post

Author: blakef

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

@@ -0,0 +1,233 @@
+---
+title: 'React Native 0.76 - New Architecture by default,React Native DevTools, Box Shadows and more'
+authors: [blakef, cipolleschi, frankcalise, gabrieldonadel]
+tags: [engineering]
+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.
+
+### 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)
+
+### 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)
+
+<!--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.
+
+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.
+
+We also worked with specific partners which are already using the New Architecture in production to make sure that your experience with it will be great.
+
+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.
+
+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`.
+
+```diff
+-newArchEnabled=false
++newArchEnabled=false
+```
+
+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.
+
+### React Native DevTools
+
+![React Native DevTools front-end](../static/blog/assets/0.76-react-native-devtools.jpg)
+
+We are shipping the first stable release of React Native DevTools, our new default debugging experience.
+We want the tooling you use to debug React across all platforms to be reliable, familiar, simple, and cohesive. React Native DevTools is an out-of-the-box experience that delivers on these principles — familiar browser-aligned developer tools that are deeply integrated with React Native.
+Key features:
+
+- **Familiar, web-aligned tooling** — A fully featured debugger based on Chrome DevTools, providing reliable breakpoints, watch values, step through debugging, stack inspection, and a rich JavaScript console. These core features now work reliably and across reloads.
+- **An improved and integrated version of React DevTools** — The built-in React Components Inspector and Profiler are powerful tools to inspect and understand your React app, and work just as they do on the web. Component highlighting is faster and more reliable than before.
+- **Improved UX** — See a new Paused in Debugger overlay, making it clear when your app is paused on a breakpoint. Warnings in LogBox are now displayed as a summary, and hidden when DevTools is attached.
+- **Fixed reconnection behavior** — JavaScript breakpoints now work reliably across full reloads and when DevTools is disconnected and reattached. DevTools can even reconnect to the same app after a native rebuild, and displays the app and device name in the window title.
+- **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://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.
+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://github.com/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)
+- [Announcement talk at React Universe Conf](https://www.youtube.com/watch?v=OwivVpg6Luc)
+- [Feedback thread and FAQs](https://github.com/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.
+
+#### `boxShadow`
+
+`boxShadow` adds a shadow to an element, with the ability to control the position, color, size, and blurriness of the shadow. Check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) for a full overview of each of these arguments, along with a fiddle to try them out for yourself. Below are a few examples of the shadows you can make.
+
+![New boxShadow style prop](../static/blog/assets/0.76-boxshadow-example.png)
+
+`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:
+
+- Do 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
+
+**Limitations & Spec Deviations**
+
+- The default shadow color is black, not the parent’s color
+- [Android] Normal shadows are supported on **Android 9+**
+- [Android] Inset shadows are supported on **Android 10+**
+
+#### `filter`
+
+`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>
+
+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**
+
+- [iOS] Only supports brightness and opacity
+- [iOS] filter will not apply to shadows, outlines, or any other graphical elements outside the bounds of the element
+- [Android] blur and drop-shadow are only supported on Android 12+
+- filter implies overflow: hidden, so children of an element with a filter will be clipped if they are positioned outside of the parents bounds.
+
+## Breaking Changes
+
+### Removed the dependency on the react-native-community/cli
+
+React Native should be [framework agnostic](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md). We completed the work to remove the `@react-native-community/cli` as a direct dependency of React Native.
+
+Decoupling React Native from the CLI allows us to move faster through releasing these projects independently.
+
+If you are relying on the CLI in your daily workflow, make sure to explicitly [add the dependency](https://react-native-community.github.io/upgrade-helper/?from=0.75.4&to=0.76.0#RnDiffApp-package.json) on the CLI in your `package.json`:
+
+```diff
+//…
+  “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”,
+  },
+```
+
+### [Android] React Native is distributed as a single library
+
+React Native 0.76 will ship with a reduced number of native dynamic libraries, as we merged a lot of our native code into a single library called `libreactnative.so`.
+This change comes with reduction in app size, and improvement in app startup performance on Android.
+
+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:
+
+```diff
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import com.facebook.soloader.SoLoader
+
+class MainApplication : Application(), ReactApplication {
+
+  override fun onCreate() {
+    super.onCreate()
++   SoLoader.init(this, OpenSourceMergedSoMapping)
+-   SoLoader.init(this, false)
+  }
+}
+```
+
+This change is necessary in order to properly load `libreactnative.so` and is included in the upgrade-helper.
+
+Library authors won’t be affected by this change, unless you have custom C++ code.
+For a technical deep dive into this change, and suggestions for library authors, you can read more about it [in this dedicated post](https://github.com/react-native-community/discussions-and-proposals/discussions/816).
+
+### Updates to Minimum iOS and Android SDK requirements
+
+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://github.com/react-native-community/discussions-and-proposals/discussions/802) and [iOS](https://github.com/react-native-community/discussions-and-proposals/discussions/812).
+
+### Other Breaking Changes
+
+- **Animation**
+  - Stop sending state updates to React in looping animation ([commit](https://github.com/facebook/react-native/commit/8af5e893c89b24dca972afe36ef442fd509d5804)). This was causing unnecessary re-rendering with looping animations.
+- **devtools:**
+  - Remove Inspector Panel perf + network tabs under New Arch ([commit](https://github.com/facebook/react-native/commit/f220bde4d7d556b3be83cccff0eec5da22921aba)). These will be replaced by React Native DevTools.
+- **text engine**
+  - Always use AttributedStringBox instead of AttributedString in TextLayoutManager ([commit](https://github.com/facebook/react-native/commit/ee597bfe2bf7f11ac60dab87f47dbcb6e840749c))
+
+#### Android
+
+- **bridging:**
+  - Deleted LongArray ([commit](https://github.com/facebook/react-native/commit/471445eb1770dcb773eb463af99c9556cb070abc))
+- **infra**
+  - Remove several libs from default App CMake setup ([commit](https://github.com/facebook/react-native/commit/52de8c70f2d8826789e4118b0c81aa4397e833fc))
+  - Merge all the remaining .so libraries into libreactnative.so ([commit](https://github.com/facebook/react-native/commit/db80d78d7a3d61d5bd6871258513f778851059f5))
+  - Remove several unnecessary android prefab targets. Use ReactAndroid::reactnative instead ([commit](https://github.com/facebook/react-native/commit/6e5227bd8357dcbe12038b21066cf414e3f97e03))
+  - Do not depend on OSS SoLoader anymore and do not expose Fresco `api` dependency. ([commit](https://github.com/facebook/react-native/commit/6dc01dad09c6ee2ac6793db1b11cb98faada9c3b))
+  - Updating `minSdkVersion` to API 24 (Android 7) ([commit](https://github.com/facebook/react-native/commit/270951a2123b5c51567b72a8f1a8a1608cba43d7))
+- **initialization:**
+  - `ReactNativeHost` invalidates the instance manager on `clear()`, rather than merely destroying the instance. ([commit](https://github.com/facebook/react-native/commit/986cf18dd2f0d6ea491d521549c0bf9a323e189b))
+- **layout engine:**
+  - Do not implicitly convert parsed LengthPercentage to pixels ([commit](https://github.com/facebook/react-native/commit/9e48976bc2864c6ef6995179a7dc8d1c453dcf39))
+- **rendering:**
+  - Set "enableBackgroundStyleApplicator" by default ([commit](https://github.com/facebook/react-native/commit/5f14963da081deeac2fb540d58c8667c2d2c5d08))
+
+#### iOS
+
+- **turbomodule**
+  - Removed the `RCT_EXPORT_CXX_MODULE_EXPERIMENTAL` Macro for autolinking pure Cxx module ([commit](https://github.com/facebook/react-native/commit/184646e49169110842bafa6c02e52f6eec1e0ffa#diff-28b37f7a1a36054d37cd957bd4718ce481006efb286e5e88dec565087c4a8727)).
+
+## Acknowledgements
+
+React Native 0.76 contains over [1052 commits](https://github.com/facebook/react-native/compare/6f7eae5c583090bd62ca60a4c3170445e5a0a751..0.76-stable) from 156 contributors. Thanks for all of your hard work!
+
+Thanks to all the additional authors that worked on documenting features in this release post:
+
+- [Joe Vilches](https://github.com/joevilches) and [Nick Gerleman](https://github.com/NickGerleman) box shadow and filter style props.
+- [Alex Hunt](https://github.com/huntie) React Native DevTools.
+- [Nicola Corti](https://github.com/cortinico) Android shipping as a single library.
+
+## Upgrade to 0.76
+
+Please use the [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) to view code changes between React Native versions for existing projects, in addition to the Upgrading docs.
+
+To create a new project:
+
+```
+npx @react-native-community/cli@latest init MyProject –version latest
+```
+
+If you use Expo, React Native 0.76 will be supported in Expo SDK 52.
+
+::: info
+0.76 is now the latest stable version of React Native and 0.73.x moves to unsupported. For more information see React Native's support policy. We aim to publish a final end-of-life update of 0.73 in the near future.
+:::

website/blog/authors.yml

@@ -14,6 +14,14 @@ Eli White:
     github: elicwhite
   image_url: https://github.com/elicwhite.png
 
+frankcalise:
+  name: Frank Calise
+  title: Software Engineer
+  socials:
+    x: frankcalise
+    github: frankcalise
+  image_url: https://github.com/frankcalise.png
+
 lunaleaps:
   name: Luna Wei
   title: Software Engineer at Meta