React Native 0.74: What’s New and Why It Matters

React Native has released version 0.74, bringing several significant updates. This guide will explain the new features and changes in simple language, so anyone can understand, even if they aren’t fluent in English.

Overview of React Native 0.74

Here are the main updates in React Native 0.74:

Yoga 3.0 Layout Engine
New Architecture: Bridgeless by Default
Batched onLayout Updates
Yarn 3 as Default Package Manager
Removal of Deprecated APIs
Minimum Android SDK Bumped to 6.0

Yoga 3.0 Layout Engine

Yoga 3.0 is the new version of React Native’s layout engine. It makes styling more predictable and supports web components.

Changes in Yoga 3.0

Layout Behavior: Yoga 3.0 fixes some layout issues, making it work like the web. If your app used the old behavior, you might need to update your code.

Example Before and After Yoga 3.0

Before:

<View style={{ flexDirection: 'row', backgroundColor: 'red', margin: 10, width: 200, height: 100 }}>
  <View style={{ flexDirection: 'row-reverse', backgroundColor: 'blue', flex: 1, marginLeft: 50 }}>
    <View style={{ backgroundColor: 'green', height: '50%', flex: 1, marginLeft: 50 }} />
  </View>
</View>

After:

<View style={{ flexDirection: 'row', backgroundColor: 'red', margin: 10, width: 200, height: 100 }}>
  <View style={{ flexDirection: 'row-reverse', backgroundColor: 'blue', flex: 1 }}>
    <View style={{ backgroundColor: 'green', height: '50%', flex: 1 }} />
  </View>
</View>

New Features in Yoga 3.0

Support for align-content: ‘space-evenly’: This distributes lines evenly in a multi-line flex container.
Support for position: ‘static’: Useful in the new architecture to position elements without offsetting them.

New Architecture: Bridgeless by Default

In React Native 0.74, Bridgeless Mode is the default when using the new architecture. This improves the way JavaScript communicates with native code, making apps faster and more efficient.

Batched onLayout Updates

State updates in onLayout callbacks are now batched together. This means fewer re-renders and better performance.

Example of Batched Updates

Before:

function MyComponent() {
  const [state1, setState1] = useState(false);
  const [state2, setState2] = useState(false);

  return (
    <View>
      <View onLayout={() => setState1(true)} />
      <View onLayout={() => setState2(true)} />
    </View>
  );
}

After:

function MyComponent() {
  const [state1, setState1] = useState(false);
  const [state2, setState2] = useState(false);

  return (
    <View>
      <View onLayout={() => { setState1(true); setState2(true); }} />
    </View>
  );
}

Yarn 3 as Default Package Manager

New React Native projects now use Yarn 3 instead of Yarn 1. This brings better performance and features.

Removal of Deprecated APIs

React Native 0.74 removes some old, unused APIs to make the framework cleaner and more efficient. Here are the main changes:

Android Minimum SDK Bump: The minimum Android version is now 6.0 (SDK 23).
Removal of PropTypes: PropTypes have been removed. Use TypeScript for type checking instead.
Changes to PushNotificationIOS: Deprecated APIs for push notifications on iOS have been removed.

Other Notable Changes

Flipper Plugin Removed: Flipper is no longer included by default. Use dedicated debugging tools instead.
General Improvements: Various other improvements and bug fixes to enhance stability and performance.

Example Project with React Native 0.74

Let’s create a simple project to see these new features in action.

Step 1: Create a New Project

Run this command to create a new React Native project with version 0.74:

npx react-native init MyNewProject --version 0.74.0
cd MyNewProject

Step 2: Using Yoga 3.0

Here’s how you can use Yoga 3.0 features:

import React from 'react';
import { StyleSheet, View } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <View style={styles.innerBox} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row-reverse',
    backgroundColor: 'red',
    margin: 10,
  },
  box: {
    flex: 1,
    backgroundColor: 'blue',
  },
  innerBox: {
    backgroundColor: 'green',
    height: '50%',
    flex: 1,
    marginLeft: 50,
  },
});

export default App;

Step 3: Running the App

Run the app using these commands:

npx react-native run-android
npx react-native run-ios

Observing the Changes

With Yoga 3.0, you should see more predictable layout behavior. The performance improvements with Bridgeless Mode and batched updates will be noticeable as your app grows.

Conclusion

React Native 0.74 introduces several important updates that improve performance, simplify development, and clean up the codebase. Whether you’re starting a new project or maintaining an existing one, upgrading to React Native 0.74 will provide significant benefits.

By understanding and using these new features, you can create more efficient, reliable, and high-performing mobile applications. Happy coding!

Coders Pathway