Translated from Korean

React Native 0.77 업데이트로 살펴보는 스타일과 템플릿의 변화

Exploring Changes in Styling and Templates with React Native 0.77

The React Native ecosystem is accelerating web standard compliance and the modernization of native development environments following the stabilization of the New Architecture. React Native 0.77 improves the practical developer experience by extending CSS style properties familiar to web frontend developers at the engine level and transitioning the default language for new iOS projects to Swift. Connecting these latest version trends makes it clear how close mobile component creation has become to web React.

Support for New CSS Styles Linked to Web Standards

In the previous React Native environment, only a subset of web CSS specifications were supported with modifications, which often required workarounds for layout calculations or visual border handling. Starting from version 0.77, built on the New Architecture, it officially supports core layout properties like boxSizing: 'border-box' and display: 'contents'. Properties related to outline for drawing separate lines outside borders, and mixBlendMode for blending effects, have also been added.

Here is an example of writing styles as of React Native 0.77.

tsx

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

export function Card() {
  return (
    <View style={styles.card}>
      <Text>웹과 동일한 박스 모델 적용</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    boxSizing: 'border-box',
    outlineColor: '#0066cc',
    outlineWidth: 2,
    outlineStyle: 'solid',
    padding: 16,
  },
});

It is now possible to port web component layout styles to mobile views with almost no modifications.

Swift Template Transition and Android Platform Preparation

Long-awaited tasks have also been addressed in the native build layer. When generating a new template, the default iOS project files are now created in Swift instead of Objective-C. This means developers who previously had to handle native modules or AppDelegate settings can now manage native configurations with more concise and safer Swift code.

On the Android side, official compatibility for 16KB memory pages tailored to the latest device specifications has been applied. Teams preparing for the latest Android OS standards can now worry less about native library conflicts. The debugging system has also been unified into the standard Chrome DevTools Protocol, streamlining the previous Metro terminal log streaming.

React 19 Features Coming to Mobile

In the flow leading from style extensions to version 0.78, support for React 19 is fully underway. You can now pass forwardRef directly as a component prop without wrapping it in ref, and you can place asynchronous transition hooks like useActionState directly into mobile screen logic. Support for the React Compiler via Babel plugins has also become easier, reducing the burden of manual memoization.

Decision-making for Adoption and Migration Criteria

The newly added CSS properties only work on Fabric, the New Architecture renderer. If your project still maintains the legacy bridge method, upgrading to 0.77 will not render these new style properties, so architecture migration must be prioritized. If you have already enabled the New Architecture or are in the process of building a new app, it is advantageous to adopt 0.77 or later to immediately benefit from improved web code shareability and faster layout creation.

rereactnative.dev

React Native Official Blog - Version 0.77

Today we are excited to release React Native 0.77!