React Native 0.83 - React 19.2, nowe funkcje DevTools, brak zmian łamiących kompatybilność

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Z przyjemnością ogłaszamy wydanie React Native 0.83!

Ta wersja zawiera React 19.2, znaczące nowe funkcje dla React Native DevTools oraz obsługę Web Performance i Intersection Observer APIs (Canary). To również pierwsze wydanie React Native bez zmian łamiących kompatybilność z perspektywy użytkownika.

Najważniejsze zmiany

• React 19.2

• Nowe funkcje DevTools

• Intersection Observers (Canary)

• Web Performance APIs jako stabilne

React 19.2

To wydanie zawiera React 19.2, wprowadzając nowe API <Activity> i useEffectEvent do React Native.

Ważne: CVE-2025-55182

W momencie wydania react-native@0.83.0 zależy od react@19.2.0. Mogliście również zauważyć ostatnie Krytyczne Zagrożenie Bezpieczeństwa w React Server Components.

Podkreślamy, że React Native NIE jest bezpośrednio dotknięty tą luką, ponieważ nie zależy od dotkniętych pakietów:

• react-server-dom-webpack
• react-server-dom-parcel
• react-server-dom-turbopack

Jednakże, jeśli używacie React Native w ramach monorepo, gdzie te pakiety mogą być obecne, sprawdźcie i zaktualizujcie je natychmiast.

W następnym wydaniu patchowym zaktualizujemy wszystkie zależności Reacta do wersji 19.2.1.

<Activity>

<Activity> pozwala podzielić aplikację na "aktywności", które można kontrolować i priorytetyzować. Można używać Activity jako alternatywy dla warunkowego renderowania części aplikacji. Obecnie obsługuje 2 tryby: 'visible' i 'hidden'.

• hidden: ukrywa dzieci, odmontowuje efekty i wstrzymuje wszystkie aktualizacje, dopóki React nie skończy przetwarzać bieżących zadań.

• visible: pokazuje dzieci, montuje efekty i przetwarza aktualizacje normalnie.

Ciekawą cechą drzew ukrytych za pomocą <Activity mode='hidden'> jest zachowanie stanu. Gdy znów staną się widoczne, zachowują np. stan wyszukiwania lub wybór z poprzedniej interakcji użytkownika.

React 19.1.1	React 19.2.1

Więcej o <Activity> można przeczytać w dokumentacji Reacta.

useEffectEvent

Częstym wzorcem przy useEffect jest powiadamianie kodu aplikacji o "zdarzeniu" z systemu zewnętrznego. Problem polega na tym, że zmiana dowolnej wartości użytej w takim zdarzeniu spowoduje ponowne uruchomienie efektu.

Aby to rozwiązać, wielu użytkowników wyłącza regułę lintera i wyklucza zależność. Może to prowadzić do błędów, ponieważ linter nie pomaga już w aktualizowaniu zależności przy późniejszej modyfikacji efektu.

Za pomocą useEffectEvent można wydzielić część logiki odpowiedzialną za "zdarzenia" z efektu, który je emituje.

Więcej informacji o useEffectEvent znajdziesz w dokumentacji Reacta.

Nowe funkcje w DevTools

W wersji 0.83 z przyjemnością wprowadzamy długo wyczekiwane funkcje oraz ulepszenia jakościowe do React Native DevTools.

Panele Sieć i Wydajność

Inspekcja sieci oraz śledzenie wydajności to dwie nowe, potężne możliwości w React Native DevTools, dostępne już teraz.

Inspekcja sieci, dostępna dla wszystkich aplikacji React Native, pozwala przeglądać i analizować żądania sieciowe wysyłane przez aplikację. Zalogowane żądania zawierają szczegółowe metadane, takie jak czasy wykonania, nagłówki wysłane/odebrane oraz podgląd odpowiedzi. Po raz pierwszy możesz też użyć zakładki Initiator, by zobaczyć, gdzie w kodzie zostało zainicjowane żądanie sieciowe.

💡 Network event coverage, Expo support

Which network events are captured?

Today, we record all network calls through fetch(), XMLHttpRequest, and <Image> — with support for custom networking libraries, such as Expo Fetch, coming later.

Expo Network differences

Because of this, apps using Expo will continue to see the "Expo Network" panel — a separate implementation by the Expo framework which will log these additional request sources but has slightly reduced features.

• Coverage for Expo-specific network events.
• No request initiator support.
• No Performance panel integration.

We're working with Expo to integrate Expo Fetch and third party networking libraries with our new Network inspection pipeline in future releases.

Śledzenie wydajności pozwala nagrać sesję wydajnościową w aplikacji, aby zrozumieć, jak działa kod JavaScript i które operacje zajmują najwięcej czasu. W React Native pokazujemy wykonanie JavaScript, ślady wydajnościowe Reacta, zdarzenia sieciowe oraz niestandardowe User Timings, renderowane na pojedynczej osi czasu wydajności.

W połączeniu z obsługą Web Performance API w wersji 0.83, stanowi to potężny zestaw funkcji zapewniający szczegółowy wgląd w potencjalne przyczyny spowolnień aplikacji. Zachęcamy do wypróbowania panelu Wydajność i włączenia go do codziennej pracy.

Dowiedz się więcej o naszych najnowszych funkcjach React Native DevTools oraz śladowych wydajnościowych Reacta.

Nowa aplikacja desktopowa

Wcześniej React Native DevTools uruchamiał się w przeglądarce i wymagał instalacji Chrome lub Edge. Dziś wprowadzamy znacznie ulepszone środowisko desktopowe z nową, zintegrowaną aplikacją. Oferuje ona:

• Tę samą konfigurację bez konieczności instalacji, teraz bez wymaganej przeglądarki.

• Szybsze uruchamianie dzięki lekkiej, notaryzowanej binardze desktopowej. W rzadkich przypadkach braku możliwości pobrania (np. korporacyjna zapora), wracamy do poprzedniego uruchamiania w przeglądarce.

• Lepsze zarządzanie oknami z ulepszonym multitaskingiem na macOS, automatycznym podnoszeniem przy breakpoincie, automatycznym podnoszeniem przy ponownym łączeniu z tą samą aplikacją oraz zapisywaniem układu okien przy ponownym uruchomieniu.

• Zwiększona niezawodność dzięki uruchamianiu DevTools oddzielnie od profilu przeglądarki. Rozwiązuje to problemy zgłaszane wcześniej, gdy niektóre preinstalowane rozszerzenia Chrome powodowały awarie React Native DevTools.

Intersection Observers (Canary)

W ramach dostarczania webowych API do React Native, dodaliśmy obsługę IntersectionObserver w wersji canary dla 0.83.

IntersectionObserver pozwala asynchronicznie obserwować przecięcia układu między elementem docelowym a jego przodkiem. Szczegóły znajdziesz w naszej dokumentacji API oraz implementacji. Przykłady są też dostępne w RNTester.

Inne zmiany

Web Performance APIs jako stabilne

Jak wprowadzono w wersji 0.82, React Native implementuje teraz podzbiór Performance APIs dostępnych w sieci — teraz wdrożonych jako stabilne:

• High Resolution Time: definiuje performance.now() i performance.timeOrigin.

• Performance Timeline: definiuje PerformanceObserver oraz metody dostępu do wpisów wydajności w obiekcie performance (getEntries(), getEntriesByType(), getEntriesByName()).

• User Timing: definiuje performance.mark i performance.measure.

• Event Timing API: definiuje typy wpisów event raportowane do PerformanceObserver.

• Long Tasks API: definiuje typy wpisów longtask raportowane do PerformanceObserver.

Te interfejsy API pozwalają śledzić różne aspekty wydajności w aplikacji, widoczne w panelu Performance w React Native DevTools oraz w czasie działania przez PerformanceObserver.

PerformanceObserver działa także w wersjach produkcyjnych, otwierając nowe możliwości przechwytywania metryk wydajności z rzeczywistego użycia w aplikacjach.

Eksperymentalne - Hermes V1

Hermes V1 to kolejny etap ewolucji Hermesa, z ulepszeniami w kompilatorze i maszynie wirtualnej znacząco zwiększającymi wydajność JavaScript.

W React Native 0.82 wydaliśmy Hermes V1 jako eksperymentalną opcję do włączenia. W wersji 0.83 Hermes V1 zawiera dalsze ulepszenia wydajności.

💡 Enabling Hermes V1

Note: While Hermes V1 is in the experimental phase, you’ll need to build React Native from source to try it out.

To try Hermes V1 in your own project, use the following steps:

1. Force your package manager to resolve the experimental version of Hermes V1 compiler package by modifying the corresponding section of your package.json file (note that the current versioning convention is only for the experimental phase of Hermes V1):

yarn

package.json

"resolutions": { "hermes-compiler": "250829098.0.4" }

npm

package.json

"overrides": { "hermes-compiler": "250829098.0.4" }

2. Enable Hermes V1 for Android by adding hermesV1Enabled=true inside android/gradle.properties:

   android/gradle.properties

   hermesV1Enabled=true

   Also, configure React Native to build from source by editing android/settings.gradle:

   android/settings.gradle

     includeBuild('../node_modules/react-native') {
         dependencySubstitution {
             substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
             substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
             substitute(project(":packages:react-native:ReactAndroid:hermes-engine")).using(module("com.facebook.hermes:hermes-android:250829098.0.1"))
         }
     }

3. Enable Hermes V1 for iOS by installing pods with RCT_HERMES_V1_ENABLED=1 environment variable.

   RCT_HERMES_V1_ENABLED=1 bundle exec pod install

   Keep in mind that Hermes V1 is not compatible with the precompiled React Native builds, so make sure you don’t use the RCT_USE_PREBUILT_RNCORE flag when installing pods.

4. To confirm if your app is running Hermes V1, execute the following code within your app or the DevTools console. This code will return the Hermes version, which should match the version specified in step 1 (250829098.0.1):

   // expecting "250829098.0.1" in Hermes V1
   HermesInternal.getRuntimeProperties()['OSS Release Version'];

Eksperymentalne - Wykluczanie starszej architektury w iOS

W tej wersji dodajemy nową flagę dla iOS pozwalającą wykluczyć starszą architekturę z bazy kodu. Jeśli aplikacja korzysta już z Nowej Architektury, można usunąć kod starszej architektury instalując pakiety CocoaPods za pomocą:

RCT_REMOVE_LEGACY_ARCH=1 bundle exec pod install

Powinno to zmniejszyć zarówno czas budowania, jak i rozmiar aplikacji. Skala poprawy zależy od liczby używanych bibliotek stron trzecich: w naszych testach, przy nowej aplikacji bez zależności, czas budowania skrócił się z 73.0 sekund do 58.2 sekund, a rozmiar aplikacji zmniejszył się z 51.2 Mb do 48.2 Mb.

informacja

RCT_REMOVE_LEGACY_ARCH nie jest kompatybilny z prekompilowanymi binariami React Native. Jeśli używasz prekompilowanych binariów, należy ponownie zainstalować pakiety i zbudować aplikację ze źródeł.

Eksperymentalne - Debugowanie prekompilowanych binariów w iOS

W tej wersji zaimplementowaliśmy możliwość debugowania kodu React Native dostarczanego z prekompilowanymi binariami. Jest to szczególnie przydatne dla opiekunów bibliotek lub podczas tworzenia natywnych modułów i komponentów.

Aby debugować kod binarny dostarczany z prekompilowanym binarium React Native, wykonaj następujące kroki:

# From the ios folder of your project
bundle exec pod cache clean --all
bundle exec pod deintegrate
RCT_USE_RN_DEP=1 RCT_USE_PREBUILT_RNCORE=1
RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS=1 bundle exec pod install
open <your-project>.xcworkspace

"Magia" dzieje się dzięki fladze RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS, która nakazuje CocoaPods pobranie plików dSYM React Native i umieszczenie ich w odpowiednim folderze.

W tym momencie można ustawić punkt przerwania w aplikacji (np. w AppDelegate.swift), a następnie zbudować i uruchomić aplikację z Xcode.

Gdy aplikacja się zatrzyma, otwórz konsolę Xcode i wykonaj polecenie LLDB:

# If you are running the app in the simulator
add-dsym <path-to-your-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64_x86_64-simulator/React.framework/dSYMs/React.framework.dSYM

# If you are running the app on a physical device
add-dsym <path-to-your-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64/React.framework/dSYMs/React.framework.dSYM

Teraz można przechodzić krok po kroku przez kod React Native.

Zmiany łamiące kompatybilność

Pracujemy nad tym, aby wydania React Native były bardziej przewidywalne i łatwiejsze w aktualizacji. React Native 0.83 to pierwsza wersja bez zmian łamiących kompatybilność z perspektywy użytkownika.

Jeśli korzystasz z React Native 0.82, powinieneś móc zaktualizować aplikację do wersji 0.83 bez żadnych zmian w kodzie aplikacji.

Aby dowiedzieć się więcej, co uznajemy za zmianę łamiącą kompatybilność, zobacz ten artykuł.

Przestarzałe funkcje

Ta wersja zawiera dwa przestarzałe elementy specyficzne dla Androida:

• Networking: Metoda sendRequestInternal jest wycofywana i została oznaczona jako przestarzała.

• Animation: startOperationBatch i finishOperationBatch są teraz przestarzałe.

Podziękowania

React Native 0.83 zawiera ponad 594 commity od 56 współtwórców. Dziękujemy za waszą ciężką pracę!

Specjalne podziękowania kierujemy do członków społeczności, którzy wnieśli znaczący wkład w tę wersję:

• Ruslan Lesiutin, Moti Zilberman i Alex Hunt za funkcje wydajności i sieci w React Native DevTools.

• Moti Zilberman za aplikację desktopową React Native DevTools.

• Luna Wei za Intersection Observers.

• Rubén Norte za Web Performance APIs.

• Dawid Małecki i Jakub Piasecki za wdrożenie Hermes V1.

• Ramanpreet Nara za flagę RCT_REMOVE_LEGACY_ARCH.

• Christian Falch za debugowanie prekompilowanych binariów iOS.

Aktualizacja do wersji 0.83

Do sprawdzenia zmian kodu między wersjami React Native w istniejących projektach użyj React Native Upgrade Helper, dodatkowo do dokumentacji aktualizacji.

Aby utworzyć nowy projekt:

npx @react-native-community/cli@latest init MyProject --version latest

Jeśli używasz Expo, React Native 0.83 będzie dostępny w SDK 55, który zostanie wydany w styczniu 2026 roku.

Obsługiwane wersje

0.83 jest teraz najnowszą stabilną wersją React Native, a 0.80.x przechodzi do wersji nieobsługiwanych. Więcej informacji znajdziesz w polityce wsparcia React Native.