React Native 0.77: Comprehensive Overview of New Features and Changes

On January 21, 2025, the React Native team announced the release of version 0.77, introducing several significant updates aimed at enhancing the framework's capabilities and aligning it more closely with web standards. New CSS Features for Enhanced Layouts, Sizing, and Blending

React Native 0.77 furthers its goal of aligning with web standards by introducing support for several CSS properties, providing developers with more control over app layouts and aesthetics:

• display: contents Support: his property allows an element to be removed from the layout structure while its children are rendered as if they were direct descendants of the parent element. This is particularly useful for styling purposes where you want to apply styles to child elements without affecting the layout.
• boxSizing Property: he addition of boxSizing enables developers to define how the total width and height of an element are calculated, offering more precise control over element dimensions.
• mixBlendMode Property: With mixBlendMode, developers can specify how an element's content should blend with the background, allowing for more creative visual effects.
• Outline Properties: A few properties such as outlineWidth, outlineStyle, outlineSpread, and outlineColor have been introduced. These allow developers to highlight elements by drawing outlines without affecting their layout, similar to CSS's outline properties. Android Version 15 Support & 16KB Page Size Compatibility

React Native 0.77 introduces support for Android's 16KB memory page size, aligning with updates in Android 15. This enhancement ensures compatibility with newer Android devices and can lead to performance improvements in applications. Community CLI and Template Updates

The React Native community has made several updates to the CLI and project templates:

• Deprecation of react-native init Command: As part of the ongoing efforts to streamline the React Native CLI, the react-native init command has been fully deprecated in version 0.77. Developers are now encouraged to use frameworks such as Expo (npx create-expo-app) or invoke the Community CLI directly (npx @react-native-community/cli init) to initialize new projects.
• Removal of "Run on iOS/Android" Key Handlers from Metro: In this version, the 'a' and 'i' keyboard shortcuts have been removed from Metro. These shortcuts were previously used to invoke the run-android and run-ios commands. This change aims to improve the developer experience by reducing reliance on less commonly used shortcuts.
• Swift as the Default Language for iOS Apps: The community template for React Native projects has been modernized by migrating to Swift for iOS applications. This change simplifies the template structure by replacing multiple Objective-C files with a single Swift file. However, for developers who prefer Objective-C, compatibility is maintained, and the Objective-C++ variant of the iOS community template remains supported. Breaking Changes

Several breaking changes have been introduced in this version:

• Removal of console.log() Streaming in Metro: To enhance the debugging experience and align with modern browser tooling, log forwarding via Metro has been removed in this release. Developers are advised to use React Native DevTools' fully featured Console panel for logging purposes.
• Animation: Native looping animations no longer send a React state update every time the loop ends, reducing unnecessary updates.
• Layout: The position of sticky headers on ScrollView is now taken into account, and absolute positioning behaves more compliantly.
• JavaScript Modules: The ReactFabricInternals module has been removed and is no longer accessible.
• Native Modules: The NativeModules object can now be used to load TurboModules in JavaScript, enhancing module loading efficiency.

Upgrading to React Native 0.77

Developers looking to upgrade to version 0.77 can utilize the React Native Upgrade Helper to view code changes between versions. For new projects, the following command can be used:

npx @react-native-community/cli@latest init MyProject --version latest        

For Expo users, React Native 0.77 will be supported in Expo SDK 52, with detailed upgrade instructions to be provided in a forthcoming Expo blog post. his release marks a significant step forward in enhancing the React Native framework, providing developers with more powerful tools and aligning the framework more closely with web development standards.

To get more details and specifics about any of the topics covered, see: The Official Blog Post