React Native 0.75: What's New

Hello, React Native developers!

React Native 0.75 is here, bringing a wave of exciting improvements and enhancements that will elevate your mobile development experience. Let’s dive into the key highlights of this release:

While React 19 doesn’t introduce groundbreaking new features specifically for React Native 0.75, it ensures you’re leveraging the best in terms of performance, stability, and future-proofing. This means:

• More Responsive Apps: Enjoy smooth, lag-free interfaces even on devices with limited resources.
• Enhanced Memory Management: Optimized memory usage for overall better performance.
• Solid Architecture for the Future: Stay prepared for upcoming React innovations with React 19 already integrated, paving the way for React Compiler usage in the future.

For more details, check out Pull Request #44990

The following commands have been moved from the community CLI to React Native Core. This change aims to simplify CLI maintenance and provide a more cohesive development experience.

react-native clean
react-native build-android --mode=release
react-native build-ios --mode=release

When using the react-native init command, a deprecation warning will be displayed. To continue using the functionality of the init command after September 29, 2024, use the community CLI:

npx @react-native-community/cli init

For more details, see the following PR’s: #43289 #43288 #43287 commit 47a3f52007

The default template for a new project created with

npx @react-native-community/cli init

is now available separately from React Native Core (react-native-community/template).

This repository contains the template used by the Community (CLI) to start a new React Native project.

Create even more flexible and responsive layouts with Yoga’s support for percentages (%) in the gap property. This feature facilitates dynamic spacing between elements, adapting perfectly to different screen sizes.

  export function MyScreen() {
    return (
      <View style={stylesheet.container}>
        <View>
          <Text> Box 1 </Text>
        </View>
        <View>
          <Text> Box 2 </Text>
        </View>
      </View>
    )
  }
 
  const stylesheet = StyleSheet.create({
    container: {
      flex: 1,
      gap: '10%'
    },
  })