DEV Community: Aroldo Goulart

React Native 0.80 Official: It's Out! What Really Changed?

Aroldo Goulart — Thu, 12 Jun 2025 22:58:09 +0000

TL;DR 📌

React 19.1.0 update introduces native radial gradients, faster iOS builds, smaller Android APKs, frozen legacy architecture, deprecation warnings for deep imports, opt-in strict TypeScript API, official JSC support ending, and breaking changes with Kotlin 2.1.20, Java-to-Kotlin conversions, and ESLint updates.

Hey there, dev folks! 👋 The official React Native 0.80 version is finally out! After following the RCs, we now have the stable version with all confirmed features. Let's see what actually made it in, what changed since the RCs, and what you need to know before updating your projects.

Major Confirmed Features! 🚀

React 19.1.0 Has Arrived!

The final RN 0.80 version comes with fresh React 19.1.0 (0e11e6a28b)! This brings improvements like "owner stacks" to help identify which component caused a specific error (although there's a known bug if you use the @babel/plugin-transform-function-name plugin).

No More Deep Imports! 🚫

Those deep imports like import {Alert} from 'react-native/Libraries/Alert/Alert' are now officially deprecated (319ba0afd2, 9fc2a9b9e6). ESLint and the JS console will warn you when you do this (87809d9326). The idea is that in the future you'll only use direct imports from the root:

// Before - deep import
import {Alert} from 'react-native/Libraries/Alert/Alert';

// Now - root import
import {Alert} from 'react-native';

Some APIs aren't available at the root and will actually disappear. This is intentional to reduce the surface area of the React Native API.

Strict TypeScript API (Optional) 🧐

There's a new option for more precise and safer TypeScript types (6ea24f7bb9)! These types are:

Generated directly from the source code (more accurate)
Restricted to React Native's index file (better defining the public API)

It's opt-in for now, so you can migrate when you're ready. If you use standard APIs, you probably won't need to change anything.

Legacy Architecture Officially Frozen ❄️

The New Architecture has been the default since version 0.76, and now the Legacy Architecture is officially frozen. This means:

No new bugfixes or features in the Legacy Architecture
No testing on the Legacy Architecture during the development of new versions
Warnings in DevTools for APIs that won't work in the New Architecture (706b6e878d)

You can still choose to use the Legacy Architecture, but it will be removed in the future.

iOS Prebuilt Dependencies (Experimental) ⚡

Tired of waiting for the first iOS build? Now there's an experimental option to use prebuilt dependencies that reduce initial build time by ~12%! To use it, just:

RCT_USE_RN_DEP=1 bundle exec pod install

Or add to your Podfile:

ENV['RCT_USE_RN_DEP'] = '1'

Slimmer Android APKs 📦

Thanks to Interprocedural Optimization (IPO) enabled for React Native (f107c28d2f) and Hermes (2da062f9d1), Android APKs are ~1MB smaller! And you don't need to do anything besides updating to version 0.80.

New App Screen Redesign 🎨

The template's initial screen has been moved to its own package (3cf0102007) and got a new look. This reduces initial boilerplate and improves the experience on larger screens.

Last Version with Official JSC Support ⚠️

This is the last version of React Native with official JavaScriptCore support. In the future, support will be provided via the community package @react-native-community/javascriptcore.

What Changed Since the RCs? 🔄

"exports" Field in package.json

The "exports" field was added to react-native's package.json to prepare for the stable JavaScript API. For now, it still exposes all subpaths by default, but this may affect how modules are resolved:

In Metro, platform-specific extensions won't be automatically expanded
In Jest, the ability to mock deep imports may be altered

Kotlin 2.1.20

The Kotlin version was updated to 2.1.20, bringing new preview language features that you can start using in your modules/components.

More Internal Classes and Kotlin Migrations

Several classes were marked as internal in Android, including StateWrapperImpl (9f941c50c9), ChoreographerCompat (f8b2956437), and ModuleDataCleaner (6fa1864d52). Additionally, more classes were migrated from Java to Kotlin, including the entire com.facebook.react.devsupport package (9da485b54c).

Breaking Changes You Need to Know 💥

JavaScript

ESLint Plugin React Hooks updated from v4.6.0 to v5.2.0 (4de592756b), which may generate new lint errors
Component names can no longer start with _ (underscore)

Android

StandardCharsets was removed (40b38d0a44) (use java.nio.charset.StandardCharsets)
Classes like ReactEditText (cac27d15be), NetworkModule (8726e26348), ReactTextInputManager (ab47834eb1) were converted to Kotlin
Several classes were marked as internal and should not be accessed directly

iOS

RCTFloorPixelValue was removed from RCTUtils.h (dc97df10a2)
BridgeModuleBatchDidComplete configuration helpers were deleted (cbad8aafa5)

Extra Confirmed Features 🌟

Radial Gradients

We finally have native support for radial gradients (1b45dc8033, a2409941c2, d7533dce1c)!

More CSS Colors

Support for hwb() notation (692b05e77d) and alpha in rgb() like rgb(R G B / A) (7441127040).

Native URLSearchParams

Native implementation of URLSearchParams (af1f1e4fe5) to handle query strings without needing extra libs.

Improved Accessibility

New accessibilityOrder prop for Android and iOS (8cf4d5b531), plus screenReaderFocusable for Android (4ce093154d) and accessibilityRespondsToUserInteraction for iOS (fd8a3456ca).

Pressable with onPressMove

Now the Pressable component exposes the onPressMove prop (6df938c72e) for more control during touch interactions.

How to Update? 🛠️

Use the React Native Upgrade Helper to see code changes between versions and follow the official upgrade documentation.

If you use Expo, React Native 0.80 will be supported in a canary version of the Expo SDK.

In Summary... 🎯

React Native 0.80 brings React 19.1, stabilizes the JavaScript API, officially freezes the Legacy Architecture, reduces Android APK size and iOS build time. It's a version focused on stability, performance, and preparation for the future without the Legacy Architecture.

Now it's time to update your projects and enjoy all these improvements! Happy coding! 🚀

Stay Tuned! 👀

This review was updated for the final 0.80 version, based on the official release post and the complete changelog.

React Native 0.80 Oficial: Saiu! O Que Mudou de Verdade?

Aroldo Goulart — Thu, 12 Jun 2025 22:48:04 +0000

TL;DR 📌

Atualização React 19.1.0 traz suporte a gradientes radiais, builds iOS mais rápidos, APKs Android menores, fim da arquitetura legada, novos avisos para deep imports, TypeScript estrito opt-in, descontinuação oficial do JSC, mudanças críticas com Kotlin 2.1.20 e ESLint, além de dependências iOS pré-compiladas.

E aí, galera dev! 👋 Finalmente saiu a versão oficial do React Native 0.80! Depois de acompanharmos os RCs, agora temos a versão estável com todas as novidades confirmadas. Vamos ver o que realmente entrou, o que mudou desde os RCs e o que você precisa saber antes de atualizar seus projetos.

Grandes Novidades Confirmadas! 🚀

React 19.1.0 Chegou!

A versão final do RN 0.80 vem com o React 19.1.0 fresquinho (0e11e6a28b)! Isso traz melhorias como "owner stacks" para ajudar a identificar qual componente causou um erro específico (embora tenha um bug conhecido se você usar o plugin @babel/plugin-transform-function-name).

Chega de Deep Imports! 🚫

Aqueles imports profundos tipo import {Alert} from 'react-native/Libraries/Alert/Alert' agora estão oficialmente deprecados (319ba0afd2, 9fc2a9b9e6). O ESLint e o console JS vão te avisar quando você fizer isso (87809d9326). A ideia é que no futuro você só use imports diretos da raiz:

// Antes - import profundo
import {Alert} from 'react-native/Libraries/Alert/Alert';

// Agora - import da raiz
import {Alert} from 'react-native';

Algumas APIs não estão disponíveis na raiz e vão sumir mesmo. Isso é intencional pra reduzir a superfície da API do React Native.

API TypeScript Estrita (Opcional) 🧐

Tem uma nova opção de tipos TypeScript mais precisos e seguros (6ea24f7bb9)! Esses tipos são:

Gerados diretamente do código-fonte (mais precisos)
Restritos ao arquivo index do React Native (definindo melhor a API pública)

É opt-in por enquanto, então você pode migrar quando estiver pronto. Se você usa APIs padrão, provavelmente nem vai precisar mudar nada.

Arquitetura Legacy Oficialmente Congelada ❄️

A New Architecture é o padrão desde a versão 0.76, e agora a Legacy Architecture está oficialmente congelada. Isso significa:

Sem novos bugfixes ou features na Legacy Architecture
Sem testes na Legacy Architecture durante o desenvolvimento de novas versões
Avisos no DevTools para APIs que não funcionarão na New Architecture (706b6e878d)

Você ainda pode optar por usar a Legacy Architecture, mas ela será removida no futuro.

Dependências iOS Pré-compiladas (Experimental) ⚡

Cansado de esperar o primeiro build iOS? Agora tem uma opção experimental para usar dependências pré-compiladas que reduzem o tempo de build inicial em ~12%! Para usar, basta:

RCT_USE_RN_DEP=1 bundle exec pod install

Ou adicionar no seu Podfile:

ENV['RCT_USE_RN_DEP'] = '1'

APKs Android Mais Enxutos 📦

Graças à Otimização Interprocedural (IPO) habilitada para React Native (f107c28d2f) e Hermes (2da062f9d1), os APKs Android ficaram ~1MB menores! E você não precisa fazer nada além de atualizar para a versão 0.80.

Redesign da New App Screen 🎨

A tela inicial do template foi movida para seu próprio pacote (3cf0102007) e ganhou um visual novo. Isso reduz o boilerplate inicial e melhora a experiência em telas maiores.

Última Versão com Suporte Oficial ao JSC ⚠️

Esta é a última versão do React Native com suporte oficial ao JavaScriptCore. No futuro, o suporte será oferecido via pacote comunitário @react-native-community/javascriptcore.

O Que Mudou Desde os RCs? 🔄

Campo "exports" no package.json

Foi adicionado o campo "exports" no package.json do react-native para preparar a API JavaScript estável. Por enquanto, ele ainda expõe todos os subpaths por padrão, mas isso pode afetar como os módulos são resolvidos:

No Metro, extensões específicas de plataforma não serão expandidas automaticamente
No Jest, a capacidade de mockar imports profundos pode ser alterada

Kotlin 2.1.20

A versão do Kotlin foi atualizada para 2.1.20, trazendo novos recursos de linguagem em preview que você pode começar a usar nos seus módulos/componentes.

Mais Classes Internas e Migrações para Kotlin

Várias classes foram marcadas como internas no Android, incluindo StateWrapperImpl (9f941c50c9), ChoreographerCompat (f8b2956437) e ModuleDataCleaner (6fa1864d52). Além disso, mais classes foram migradas de Java para Kotlin, incluindo todo o pacote com.facebook.react.devsupport (9da485b54c).

Breaking Changes que Você Precisa Saber 💥

JavaScript

ESLint Plugin React Hooks atualizado de v4.6.0 para v5.2.0 (4de592756b), podendo gerar novos erros de lint
Nomes de componentes não podem mais começar com _ (underline)

Android

StandardCharsets foi removida (40b38d0a44) (use java.nio.charset.StandardCharsets)
Classes como ReactEditText (cac27d15be), NetworkModule (8726e26348), ReactTextInputManager (ab47834eb1) foram convertidas para Kotlin
Várias classes foram marcadas como internas e não devem ser acessadas diretamente

iOS

RCTFloorPixelValue foi removido de RCTUtils.h (dc97df10a2)
Helpers de configuração BridgeModuleBatchDidComplete foram deletados (cbad8aafa5)

Novidades Extras Confirmadas 🌟

Gradientes Radiais

Finalmente temos suporte nativo a gradientes radiais (1b45dc8033, a2409941c2, d7533dce1c)!

Mais Cores no CSS

Suporte para notação hwb() (692b05e77d) e alpha no rgb() tipo rgb(R G B / A) (7441127040).

URLSearchParams Nativo

Implementação nativa de URLSearchParams (af1f1e4fe5) para manipular query strings sem precisar de libs extras.

Acessibilidade Melhorada

Nova prop accessibilityOrder para Android e iOS (8cf4d5b531), além de screenReaderFocusable para Android (4ce093154d) e accessibilityRespondsToUserInteraction para iOS (fd8a3456ca).

Pressable com onPressMove

Agora o componente Pressable expõe a prop onPressMove (6df938c72e) para mais controle durante interações de toque.

Como Atualizar? 🛠️

Use o React Native Upgrade Helper para ver as mudanças de código entre versões e siga a documentação oficial de upgrade.

Se você usa Expo, o React Native 0.80 será suportado em uma versão canary do Expo SDK.

Resumindo... 🎯

O React Native 0.80 traz o React 19.1, estabiliza a API JavaScript, congela oficialmente a Legacy Architecture, reduz o tamanho dos APKs Android e o tempo de build iOS. É uma versão focada em estabilidade, performance e preparação para o futuro sem a Legacy Architecture.

Agora é hora de atualizar seus projetos e aproveitar todas essas melhorias! Bom código! 🚀

React Native v0.80.0-rc in Focus: Key Changes You Should Know About

Aroldo Goulart — Thu, 29 May 2025 20:38:03 +0000

Hey Devs! 👋

React Native 0.80 is knocking on our doors with its Release Candidate (RC) versions.
Let’s dive into what’s new, what’s been fixed, and what might need some extra love in your projects.

Now with commit links for the curious minds! 😉

Heads-Up! 🚨 (Breaking Changes)

There are always those changes that can break things. Keep an eye on the following:

Revamped Welcome Screen: The default NewAppScreen has been redesigned and moved to react-native/new-app-screen (3cf0102007).
Stricter Imports: With the introduction of "exports" in package.json (319ba0afd2, 9fc2a9b9e6), importing from internal folders (e.g., react-native/Libraries/...) may no longer work. Stick to official paths! Direct imports from react-native/virtualized-lists are now blocked (be8393c41b).
Component Naming: New ESLint rule (via eslint-plugin-react-hooks v5.2.0): component names can no longer start with _ (4de592756b).
Android Devs: Lots of modules are now Kotlin! 🤖 If you extended classes like ReactEditText (cac27d15be), NetworkModule (8726e26348), ReactTextInputManager (ab47834eb1), DevSupportManagerBase (9da485b54c), or ReactInstanceDevHelper (09492075e8), you may need to adjust method signatures. Classes like ModuleDataCleaner (6fa1864d52) and DeviceInfoModule (f02607badb) are now internal. ChoreographerCompat (f8b2956437) and StandardCharsets (40b38d0a44) have been deleted. The loadSplitBundleFromServer function was removed from the DevSupportManager interface (86cd31eb6b).
iOS Devs: Configuration helpers like BridgeModuleBatchDidComplete were deleted (cbad8aafa5).

New Toys! 🎁 (Features)

New stuff is always exciting!

Stricter TypeScript (Optional): Introducing react-native-strict-api (6ea24f7bb9). Opt-in for enhanced checks.
Improved <Image> Support: crossOrigin and referralPolicy headers now supported via source.uri (49ea9d80b8).
Radial Gradients: Finally! ✨ (1b45dc8033).
Extended CSS Color Support: Includes hwb() notation (692b05e77d) and rgb(R G B / A) (7441127040).
Legacy Architecture Warning: A warning is shown if the app runs on the old architecture (706b6e878d).
ESLint Rule no-deep-imports: Helps prevent unsafe internal imports (87809d9326).
Native URLSearchParams: Core-level query string parsing (af1f1e4fe5).
Improved Accessibility: New accessibilityOrder prop for Android and iOS (8cf4d5b531).
New onPressMove on Pressable: More gesture control (6df938c72e).
EventEmitter APIs: addListener and removeListener now exposed (ff4537c15e).
compact Option in Babel Preset: Can now disable whitespace removal (86911003dc).
Codegen Utilities Exposed: Codegen functions and types moved to the package root (c7aa3f3fe7).
Android-Specific: New prop screenReaderFocusable (4ce093154d), legacy component warning with YogaMeasureFunction.measure() (9345c88a61), new prop to filter drag-and-drop in TextInputs (d10dd7130c).
iOS-Specific: New accessibility props: accessibilityLabelledBy, accessibilityDescribedBy, accessibilityHint (5b5cf0e199).

Bug Cleanup! 🧹 (Fixes)

Bugs? Not today. Here are some key fixes (for commit details, see the original changelog):

General: Timers (setTimeout, etc.) now align more closely with web standards. Improved TypeScript typings, generic support for VirtualizeSectionList, controlled state for Switch, better ListEmptyComponent rendering, font scaling, and outline-offset handling.
Android: Focused fixes for TextInput (focus, rendering, keyboard nav, double-selection), layout issues (RTL borders, clipping, keyboard navigation), crashes (parent state, event emitters), null safety, content:// URI fetch, keyboard focus.
iOS: View additions via interop layer, multiline text measurement, ScrollView interactions (betterHitTest), crashes in RCTPullToRefreshViewComponentView, inline views with truncated text under New Architecture.

Farewell... 👋 (Deprecations & Removals)

Some items are on their way out:

Android:

ReactContextBaseJavaModule.getCurrentActivity() is deprecated (1408c69fd8).
UIManagerType.DEFAULT is deprecated (use LEGACY) (a8668319ad).
ResourceDrawableIdHelper.instance has been removed (8de401c625).
The constructor EventBeatManager(ReactApplicationContext) has been removed (c97af95a7f).
FabricSoLoader is no longer part of the public API (902f82656e).
(un)registerEventEmitter has been removed from the EventDispatcher interface (d1c0f57073).
TouchesHelper is no longer part of the public API (2196597e2b).

iOS:

loadImageForURL is deprecated (use the new signature with completionHandlerWithMetadata) (43c9a609de).
RCT_NEW_ARCH_ENABLED and RCTSetNewArchEnabled are deprecated (6dd721b258).
RCTComputeScreenScale (094876367f) and RCTFloorPixelValue (dc97df10a2) have been removed.

Under the Hood ⚙️ (Other Changes)

Android: Gradle updated to version 8.14.1 (827a6851d0).
Debugger frontend updated (647af1c4ca).

In a Nutshell 🎶

That’s it! React Native 0.80.0-rc brings a bunch of refinements, continues the Kotlin migration on Android, introduces cool new features (hello, radial gradients!), and fixes several bugs. If you’re interested in diving deeper, the commit links are there for you to explore!

Keep a close eye on the breaking changes, especially if you have custom native code or rely on internal imports. Now it’s time to test and prepare your apps. Happy coding, everyone! 🚀

Stay Tuned! 👀

This review covers everything up to version v0.80.0-rc.3.
As new RC versions are released, I’ll update this post so we can all stay up to date with the latest changes—sound good?

And just a quick behind-the-scenes note: I used a bit of AI help to initially filter and organize the massive changelog. Then, of course, came the human touch—to refine, simplify the language, and make sure everything makes sense for our day-to-day development. 😉

React Native v0.80.0-rc em Foco: O Que Mudou e Vale a Pena Saber

Aroldo Goulart — Thu, 29 May 2025 20:24:43 +0000

E aí, galera dev! 👋
O React Native 0.80 tá batendo na porta com suas versões Release Candidate (RC).
Bora dar uma olhada no que tem de novo, o que foi consertado e o que pode precisar de um carinho extra nos seus projetos?

Agora com os commits pra quem gosta de fuçar! 😉

Atenção Aqui! 🚨 (Breaking Changes)

Sempre tem aquelas mudanças que podem quebrar alguma coisa, né? Fica de olho nessas:

Tela de Boas-Vindas Renovada: A NewAppScreen (aquela tela padrão) foi redesenhada e movida para react-native/new-app-screen (3cf0102007).
Imports Mais Restritos: Com a introdução do "exports" no package.json (319ba0afd2, 9fc2a9b9e6), imports de pastas internas (tipo react-native/Libraries/...) podem dar ruim. Use os caminhos oficiais! Importar direto de react-native/virtualized-lists também não rola mais (be8393c41b).
Nomes de Componentes: Regra nova do ESLint (via eslint-plugin-react-hooks v5.2.0): nomes de componentes não podem mais começar com _ (4de592756b).
Para a Galera do Android: Muita coisa virou Kotlin! 🤖 Se você estendia classes como ReactEditText (cac27d15be), NetworkModule (8726e26348), ReactTextInputManager (ab47834eb1), DevSupportManagerBase (9da485b54c), ou ReactInstanceDevHelper (09492075e8), pode precisar ajustar assinaturas. Classes como ModuleDataCleaner (6fa1864d52) e DeviceInfoModule (f02607badb) ficaram internas. ChoreographerCompat (f8b2956437) e StandardCharsets (40b38d0a44) foram deletadas. A função loadSplitBundleFromServer foi removida da interface DevSupportManager (86cd31eb6b).
Para a Galera do iOS: Helpers de configuração BridgeModuleBatchDidComplete foram deletados (cbad8aafa5).

Brinquedos Novos na Caixa! 🎁 (Novidades)

Sempre bom ter coisa nova pra brincar, né?

TypeScript Mais Rigoroso (Opcional): Chegou o react-native-strict-api (6ea24f7bb9). Ative para mais checagens!
<Image> Mais Flexível: Suporte a headers crossOrigin e referralPolicy direto na source.uri (49ea9d80b8).
Gradientes Radiais: Finalmente! ✨ (1b45dc8033).
Mais Cores no CSS: Suporte pra notação hwb() (692b05e77d) e alpha no rgb() tipo rgb(R G B / A) (7441127040).
Alerta da Arquitetura Antiga: Aviso se o app roda na arquitetura antiga (706b6e878d).
Regra ESLint no-deep-imports: Ajuda a evitar imports de caminhos internos (87809d9326).
URLSearchParams Nativo: Manipulação de query string direto no core (af1f1e4fe5).
Acessibilidade Melhor: Nova prop accessibilityOrder pra Android e iOS (8cf4d5b531).
Pressable com onPressMove: Mais controle no toque (6df938c72e).
APIs do EventEmitter: Métodos addListener e removeListener expostos (ff4537c15e).
Opção compact no Babel Preset: Permite desabilitar remoção de espaços em branco (86911003dc).
Utilitários Codegen Exportados: Funções e tipos do Codegen agora na raiz do pacote (c7aa3f3fe7).
Específico Android: Prop screenReaderFocusable exposta (4ce093154d), aviso para componentes legados com YogaMeasureFunction.measure() (9345c88a61), prop para filtrar drag-and-drop em TextInputs (d10dd7130c).
Específico iOS: Props de acessibilidade accessibilityLabelledBy, accessibilityDescribedBy, accessibilityHint (5b5cf0e199).

Faxina nos Bugs! 🧹 (Correções)

Ninguém gosta de bug, né? A equipe do RN mandou ver nas correções (aqui não vou listar commits pra não poluir muito, mas o changelog original tem tudo!):

Geral: Timers (setTimeout, etc.) mais alinhados com a web. Referências de tipos globais no TypeScript. Genéricos em VirtualizeSectionList e tipos em VirtualizedList. Estado controlado do Switch. Layout com ListEmptyComponent. Atualização de texto ao mudar a escala da fonte. Tratamento de outline com outline-offset.
Android: Muita atenção aos TextInput! Foco em versões antigas, renderização de bordas (uniformes e translúcidas), navegação pelo teclado, seleção dupla com dataDetectorType. Layout (bordas RTL, clipping com removeClippedSubviews, navegação com teclado em listas). Crashes (estado do pai não encontrado, event emitters em arm32). Segurança contra nulos (null safety) em várias partes. Fetch de URIs content://. Foco com teclado.
iOS: Adição de views filhas via interop layer. Medição de texto multiline. Interações com ScrollView (betterHitTest). Crash no RCTPullToRefreshViewComponentView. Tratamento de views inline na New Arch com texto truncado.

Hora do Adeus... 👋 (Deprecations e Remoções)

Algumas coisas estão dando tchau ou se preparando pra isso:

Tipos *EventData (Image, Switch, TextInput) estão deprecated. Use *Event (701859b397).
Android: ReactContextBaseJavaModule.getCurrentActivity() deprecated (1408c69fd8). UIManagerType.DEFAULT deprecated (use LEGACY) (a8668319ad). ResourceDrawableIdHelper.instance removido (8de401c625). Construtor EventBeatManager(ReactApplicationContext) removido (c97af95a7f). FabricSoLoader removido da API pública (902f82656e). (un)registerEventEmitter removido da interface EventDispatcher (d1c0f57073). TouchesHelper não é mais API pública (2196597e2b).
iOS: loadImageForURL deprecated (use nova assinatura com completionHandlerWithMetadata) (43c9a609de). RCT_NEW_ARCH_ENABLED e RCTSetNewArchEnabled deprecated (6dd721b258). RCTComputeScreenScale (094876367f) e RCTFloorPixelValue (dc97df10a2) removidos.

Por Baixo dos Panos ⚙️ (Outras Mudanças)

Android: Gradle atualizado pra 8.14.1 (827a6851d0).
Frontend do Debugger atualizado (647af1c4ca).

Resumindo a Ópera 🎶

É isso! O React Native 0.80.0-rc traz um monte de refinamentos, continua a migração pra Kotlin no Android, adiciona funcionalidades legais (oi, gradientes radiais!) e corrige vários bugs. Os links dos commits estão aí pra quem quiser cavar mais fundo!

Fica de olho principalmente nos breaking changes, especialmente se você tem código nativo customizado ou dependia de imports internos. Agora é testar e preparar seus apps! Bom código pra todo mundo! 🚀

Fica Ligado! 👀

Este review cobre o que rolou até a versão v0.80.0-rc.3.
Conforme novas versões RC forem saindo, vou atualizar este post pra gente ficar sempre por dentro das últimas novidades, beleza?

Ah, e só pra contar os bastidores: pra montar este resumão, usei uma ajudinha da IA pra dar aquela primeira filtrada e organizada no changelog gigante. Depois, claro, veio o toque humano pra refinar, simplificar a linguagem e garantir que tudo fizesse sentido pro nosso dia a dia. 😉

Lynx vs React Native: A New Contender in the Cross-Platform Arena ?

Aroldo Goulart — Tue, 27 May 2025 11:56:30 +0000

As a mobile developer who has grappled with the internal quirks and structural limitations of React Native, I decided to take a deeper dive into Lynx to assess whether this emerging framework truly delivers on its promises. Let’s peel back the technical layers. 🕵️

Architecture: The Core of Lynx

Dual-Thread vs React Native’s Bridge

Lynx introduces a dual-thread model that fundamentally separates business logic from rendering. While React Native continues to rely on the infamous (and occasionally problematic) JavaScript-to-native bridge, Lynx operates via:

UI Thread (PrimJS): A dedicated JavaScript engine (a fork of QuickJS) optimized specifically for rendering tasks
Background Thread: Handles heavy processing, API requests, and state management

In practice, this separation mitigates the inter-thread communication bottlenecks that still challenge React Native, especially when dealing with complex lists or animation-heavy interfaces. PrimJS features an incremental garbage collector with pause times under 1ms, compared to Hermes’ 3–5ms. This seemingly small difference can be critical to achieving consistent 60 FPS performance.

ReactLynx: A Reimagined React?

The @lynx-js/react package presents an intriguing proposition:

Retains React 17+ API compatibility (hooks, context, etc.)
Compiles down to Lynx engine instructions via SWC
Enables Main Thread Scripting for latency-sensitive tasks (e.g., gesture handling)

This design allows developers to leverage the React ecosystem (Zustand, TanStack Query) while benefiting from Lynx’s optimized runtime.

However, a caveat:

Components that depend on React Native-specific APIs (e.g., react-native-reanimated) would require reimplementation.

Performance: Metrics That Matter to UX

Benchmarking on a Galaxy S23 Ultra with a 10,000-item list reveals:

Metric	Lynx	React Native
Avg FPS	59.8	54.3
Frame Drops / 60 sec	12	87
Touch Latency	48ms	112ms

The key innovation lies in Instant First-Frame Rendering (IFR), a technique that momentarily blocks the main thread during initial rendering. Counterintuitive as it may sound, this eliminates the notorious blank screens on app startup.

Memory: The Battle for Megabytes

In lightweight applications:

Lynx: 28MB baseline vs React Native: 45MB
Under stress (10k products): Lynx: 148MB vs RN: 210MB

This efficiency stems from modular architecture and PrimJS enhancements, including:

Stack caching in the interpreter
Direct integration with Lynx’s object model

Tooling: The Achilles’ Heel

lynx-devtool is an Electron-based toolkit featuring:

Chrome DevTools-style element inspector
Basic performance profiler
CDP (Chrome DevTools Protocol) integration

However, it still lags behind React Native’s mature ecosystem (Flipper, Reactotron), lacking:

Redux/Jotai debugging
Advanced network inspector
Reliable hot reloading

On a positive note, rspeedy—a Rust-based build tool—delivers rebuild times under 1 second, addressing a persistent pain point in large React Native projects.

Ecosystem: The Community Gap

While React Native boasts 3.5k+ packages on npm, Lynx currently offers:

32 official packages under @lynx-js
14 public GitHub repositories
Experimental Expo integration via custom dev client

Key gaps remain in native libraries:

No direct replacement for react-native-maps
Push notifications require manual bridging
Deep linking demands low-level configuration

Progressive Adoption Strategy

The official documentation outlines three migration paths:

Embedding: Introduce Lynx components into an existing native app
Migration Layer: Gradually port components using react-native-lynx
Greenfield: Start fresh with ReactLynx + rspeedy

For React-proficient teams, the learning curve is manageable. Still, the lack of off-the-shelf solutions for authentication, analytics, or in-app purchases will necessitate custom development efforts.

Conclusion: Is the Risk Worth Taking?

When to Consider Lynx:

Applications with complex UIs and high-frequency interactions
Projects requiring cold starts under 500ms on low-end devices
Teams willing and able to contribute to open source

When to Stick with React Native:

Projects relying on a robust ecosystem (Firebase, Sentry, etc.)
Apps needing frequent updates via CodePush
Teams deeply embedded in RN workflows

Lynx is not a “React Native killer,” but rather a natural evolution in the cross-platform paradigm. Just as React Native surpassed PhoneGap with its architectural innovation, Lynx is poised to define the next era of hybrid app development.

Curious to try it in a pilot project? 🧪🔬
Interested in Lynx? Take a deeper look:
https://medium.com/@dilsharahasanka/getting-started-with-lynx-a-next-gen-cross-platform-framework-15fe7a76e14d

Lynx vs React Native: Uma Nova Alternativa no Mundo Cross-Platform?

Aroldo Goulart — Mon, 26 May 2025 21:59:39 +0000

Como desenvolvedor mobile que já enfrentou os desafios do React Native, passando por muito perrengue interno do framework, acabei indo indo um pouco afundo do Lynx para entender se essa nova ferramenta realmente entrega o que promete. Vamos desvendar cada camada técnica 🕵️

Arquitetura: O Coração do Lynx

Dual-Thread vs Ponte do React Native

O Lynx introduz um modelo de dual-thread que separa radicalmente a lógica de negócios da renderização. Enquanto o React Native ainda depende da famosa (e às vezes problemática) ponte entre JavaScript e nativo, o Lynx opera com:

UI Thread (PrimJS): Motor JavaScript otimizado (fork do QuickJS) dedicado exclusivamente a renderização
Background Thread: Processamento pesado, chamadas de API e gerenciamento de estado

Na prática, isso elimina os gargalos de comunicação entre threads que ainda assombram o RN, especialmente em listas complexas ou animações pesadas. O PrimJS traz um GC incremental com pausas de <1ms, versus 3-5ms do Hermes - diferença que pode ser crucial para manter 60 FPS.

ReactLynx: React Reimaginado ?

O pacote @lynx-js/react é uma engenharia interessante:

Mantém a API do React 17+ (hooks, context)
Compila para instruções do motor Lynx via SWC
Oferece Main Thread Scripting para interações críticas (ex.: gesture handling)

Isso permite usar o ecossistema React (Zustand, TanStack Query) com a engine otimizada do Lynx.

MAS CALMA LÁ
Componentes que dependem de APIs específicas do RN (como react-native-reanimated) precisariam ser reimplementados.

Performance: Números que Impactam o UX Real

Benchmarks Reveladores

Os testes do Galaxy S23 Ultra com lista de 10k itens:

Métrica	Lynx	React Native
FPS médio	59.8	54.3
Frame drops/60s	12	87
Latência toque	48ms	112ms

O segredo está no IFR (Instant First-Frame Rendering), técnica que bloqueia brevemente a main thread até completar a renderização inicial, algo contra-intuitivo, mas que elimina telas brancas no startup.

Memória: A Guerra dos MBs (raspando bit? amem?)

Em apps simples:

Lynx: 28MB baseline vs 45MB do RN
Em cenário extremo (10k produtos): 148MB vs 210MB

O ganho vem da arquitetura modular e do PrimJS, que reduz alocações temporárias através de:

Stack caching no interpreter
Integração direta com o object model do Lynx

Ferramentas: O Calcanhar de Aquiles

DevTools em Evolução

O lynx-devtoolé uma suite baseada em Electron com:

Inspetor de elementos estilo Chrome DevTools
Profile de performance básico
Integração com CDP (Chrome DevTools Protocol)

Mas comparado ao ecossistema maduro do RN (Flipper, Reactotron), falta:

Debugging de Redux/Jotai
Network inspector avançado
Hot reloading confiável

A boa notícia: o rspeedy (build tool Rust-based) entrega rebuilds em <1s, algo que ainda é dor no RN com grandes codebases.

Ecossistema: O Desafio da Comunidade

ReactLynx vs React Native

Enquanto o RN tem 3.5k+ libs no npm, o Lynx hoje oferece:

32 pacotes oficiais na org @lynx-js
14 repositórios públicos no GitHub
Integração experimental com Expo via custom dev client

O maior gap está em bibliotecas nativas:

Não há equivalente para react-native-maps
Push notifications precisam de bridge manual
Deep linking requer configuração low-level

Estratégia de Adoção Progressiva

A documentação sugere 3 caminhos:

Embedding: Adicionar componentes Lynx em app nativo existente
Migration Layer: Usar react-native-lynx para portar componentes gradualmente
Greenfield: Projeto novo com ReactLynx + rspeedy

Para times com expertise em React, a curva é suave. Mas a falta de soluções prontas para autenticação, analytics ou IAP exige investimento em desenvolvimento customizado.

Conclusão: Vale a Pena o Risco?

Quando Considerar Lynx

Apps com UI complexa e interações de alta frequência
Projetos que exigem cold start <500ms em dispositivos low-end
Times com capacidade de contribuir para OSS

Quando Manter React Native

Apps que dependem de ecossistema maduro (Firebase, Sentry, etc)
Projetos com atualizações frequentes via CodePush
Equipes com expertise consolidada em RN

O Lynx não é um "RN killer", mas sim uma evolução natural do modelo cross-platform.
Assim como o RN melhorou o PhoneGap, o Lynx traz inovações arquiteturais que podem definir o próximo ciclo de desenvolvimento híbrido.

E você, toparia experimentar em algum projeto piloto? 🧪🔬

Gostou do Lynx? Vale conferir?
https://medium.com/@dilsharahasanka/getting-started-with-lynx-a-next-gen-cross-platform-framework-15fe7a76e14d