React Native 0.77: Key Features and Enhancements

React Native 0.77: Key Features and Enhancements

New CSS Features

1. display: contents
The display: contents property visually removes an element from the layout hierarchy while keeping its children intact. This allows wrapper components to avoid affecting the layout.

function Alerting({ children }) {
  return (
    <View
      style={{ display: 'contents' }}
      onPointerDown={() => alert('Hello World!')}
    >
      {children}
    </View>
  );
}

2. boxSizing
React Native now supports both content-box and border-box sizing models. Unlike the web, it defaults to border-box for compatibility.

<View
  style={{
    width: 100,
    padding: 20,
    borderWidth: 10,
    boxSizing: 'content-box',
  }}
/>

3. mixBlendMode
The mixBlendMode property allows color blending effects for visually striking interfaces.

<View
  style={{
    backgroundColor: 'red',
    mixBlendMode: 'multiply',
  }}
/>

4. Outline Properties
New properties such as outlineWidth, outlineStyle, outlineSpread, and outlineColor offer styling options for highlighting elements without affecting layout.

<View
  style={{
    outlineWidth: 2,
    outlineColor: 'blue',
    outlineStyle: 'dashed',
  }}
/>

---

Android Enhancements

1. Android 15 Support

• Ensures smooth adaptation for apps targeting API level 35, especially with forced edge-to-edge display.

2. 16KB Page Size Support

• Prepares React Native for future Android devices with 16KB memory pages, improving compatibility and performance.

---

Community CLI and Template Updates

1. Deprecation of react-native init

• Use npx create-expo-app or npx @react-native-community/cli init for creating new projects.

2. Swift as Default for iOS Projects

• New iOS projects now use Swift instead of Objective-C, simplifying iOS development.

---

Breaking Changes

1. Removal of console.log Streaming in Metro

• Log forwarding via Metro is replaced by the Chrome DevTools Protocol (CDP). Use React Native DevTools or Expo Tools for viewing JavaScript logs.

---

Other Notable Changes

1. Sticky Headers

   • Sticky headers in ScrollView now behave more consistently.

2. Absolute Positioning

   • Improvements to ensure better layout consistency.

3. Native Animations

   • Looping animations no longer trigger unnecessary React state updates.

4. ReactFabricInternals Module Removal

   • The module has been removed for better alignment with the New Architecture.

5. TurboModules

   • NativeModules now support TurboModules for enhanced performance.

---

These updates in React Native 0.77 mark a significant step forward in performance, styling, and platform support. The enhanced features, breaking changes, and new capabilities make it easier than ever to build responsive and modern apps.