React Native 0.86 wprowadza kompleksową obsługę edge-to-edge dla Androida 15+, będąc drugim z rzędu wydaniem bez przełomowych zmian. Opublikowana w czerwcu 2026 roku wersja rozwiązuje krytyczne problemy z API layoutu i pomiarów, które były po cichu psute przez wymuszony tryb edge-to-edge na Androidzie.

Zero Przełomowych Zmian

React Native 0.86 zachowuje pełną kompatybilność wsteczną z wersją 0.85. Ścieżka aktualizacji nie wymaga modyfikacji kodu dla większości aplikacji, co czyni tę wersję jedną z najpłynniejszych głównych aktualizacji w historii React Native.

Zrozumienie Edge-to-Edge na Androidzie 15

Layouty edge-to-edge pozwalają treści rozciągać się pod elementami systemowego UI, takimi jak pasek stanu i pasek nawigacji. Android 15 wymusza to zachowanie domyślnie, niezależnie od konfiguracji aplikacji. React Native 0.86 zapewnia poprawne działanie wszystkich API do pomiarów i layoutu w tych warunkach.

Funkcja measureInWindow zwraca teraz dokładne współrzędne, gdy tryb edge-to-edge jest aktywny. Wcześniej pomiary mogły być przesunięte o wysokość elementów systemowego UI, powodując błędy pozycjonowania w overlayach, tooltipach i pływających przyciskach akcji.

SafeAreaHandler.tsxtypescript

import React, { useRef, useCallback } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface TooltipPosition {
  x: number;
  y: number;
}

export function SafeAreaHandler() {
  const buttonRef = useRef<View>(null);
  const insets = useSafeAreaInsets();

  const showTooltip = useCallback(() => {
    // measureInWindow zwraca teraz poprawne współrzędne na Android 15+
    buttonRef.current?.measureInWindow((x, y, width, height) => {
      const position: TooltipPosition = {
        x: x + width / 2,
        // Współrzędne są dokładne nawet z włączonym edge-to-edge
        y: y + height + 8,
      };
      console.log('Pozycja tooltipa:', position);
    });
  }, []);

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View ref={buttonRef} collapsable={false}>
        <TouchableOpacity onPress={showTooltip} style={styles.button}>
          <Text style={styles.buttonText}>Pokaż Tooltip</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  button: { backgroundColor: '#007AFF', padding: 16, borderRadius: 8 },
  buttonText: { color: '#FFFFFF', fontWeight: '600' },
});

Prop collapsable={false} zapewnia, że View zachowuje natywną referencję do pomiarów. Bez tego React Native może zoptymalizować natywny widok, powodując niepowodzenie measureInWindow.

Poprawki KeyboardAvoidingView dla Androida 15

Komponent KeyboardAvoidingView nieprawidłowo obliczał dostępną przestrzeń, gdy tryb edge-to-edge był aktywny. Wersja 0.86 naprawia to poprzez uwzględnienie insets systemowego UI w obliczeniach offsetu klawiatury.

ChatInput.tsxtypescript

import React, { useState } from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  TextInput,
  View,
  FlatList,
  StyleSheet,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface Message {
  id: string;
  text: string;
}

export function ChatInput() {
  const [message, setMessage] = useState('');
  const [messages] = useState<Message[]>([]);
  const insets = useSafeAreaInsets();

  return (
    <KeyboardAvoidingView
      style={styles.container}
      // Poprawka 0.86: behavior="padding" działa prawidłowo z edge-to-edge
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      // keyboardVerticalOffset uwzględnia teraz system insets
      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : insets.bottom}
    >
      <FlatList
        data={messages}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.messageContainer}>
            <Text>{item.text}</Text>
          </View>
        )}
        contentContainerStyle={{ paddingBottom: 16 }}
      />
      <View style={[styles.inputContainer, { paddingBottom: insets.bottom }]}>
        <TextInput
          style={styles.input}
          value={message}
          onChangeText={setMessage}
          placeholder="Wpisz wiadomość..."
          multiline
        />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  messageContainer: { padding: 12, marginVertical: 4 },
  inputContainer: { borderTopWidth: 1, borderTopColor: '#E5E5E5', padding: 8 },
  input: { minHeight: 40, maxHeight: 120, paddingHorizontal: 12 },
});

Property keyboardVerticalOffset współpracuje teraz prawidłowo z safe area insets. Ta poprawka eliminuje częsty błąd, gdzie pola tekstowe były częściowo zasłonięte przez klawiaturę na urządzeniach z Android 15.

Nowe Narzędzia React Native DevTools

React Native 0.86 wprowadza znaczące ulepszenia React Native DevTools, oferując bardziej zintegrowane doświadczenie debugowania. Nowa architektura DevTools łączy się bezpośrednio z runtime'em aplikacji, zapewniając inspekcję drzewa komponentów w czasie rzeczywistym bez kompromisów wydajnościowych.

PerformanceMonitor.tsxtypescript

import React, { useEffect, useCallback } from 'react';
import { InteractionManager, PerformanceObserver } from 'react-native';

interface PerformanceEntry {
  name: string;
  duration: number;
  startTime: number;
}

export function usePerformanceMonitoring() {
  const logPerformance = useCallback((entries: PerformanceEntry[]) => {
    entries.forEach((entry) => {
      if (__DEV__) {
        // Integracja DevTools: metryki pojawiają się w panelu Performance
        console.log(`[Perf] ${entry.name}: ${entry.duration.toFixed(2)}ms`);
      }
    });
  }, []);

  useEffect(() => {
    const observer = new PerformanceObserver((list) => {
      logPerformance(list.getEntries() as PerformanceEntry[]);
    });

    observer.observe({ entryTypes: ['measure'] });

    return () => observer.disconnect();
  }, [logPerformance]);

  const measureInteraction = useCallback(
    (name: string, callback: () => void) => {
      const start = performance.now();
      InteractionManager.runAfterInteractions(() => {
        callback();
        const duration = performance.now() - start;
        performance.measure(name, { start, duration });
      });
    },
    []
  );

  return { measureInteraction };
}

Panel Network DevTools wyświetla teraz żądania z pełnymi szczegółami timingu, włącznie z czasem DNS lookup, TLS handshake i transferu odpowiedzi. Ta widoczność pomaga identyfikować wąskie gardła sieciowe bez zewnętrznych narzędzi proxy.

Optymalizacje React 19 Integration

React Native 0.86 w pełni wykorzystuje możliwości React 19, włączając Actions, use hook i Server Components dla aplikacji wykorzystujących architekturę serwerową. Integracja z renderingiem po stronie serwera pozwala na preloading danych podczas początkowego ładowania aplikacji.

UserProfile.tsxtypescript

import React, { use, Suspense } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';

interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}

async function fetchUser(userId: string): Promise<User> {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error('Nie udało się pobrać użytkownika');
  return response.json();
}

// Tworzenie zasobu poza komponentem dla optymalnego cachowania
const userResource = new Map<string, Promise<User>>();

function getUserResource(userId: string): Promise<User> {
  if (!userResource.has(userId)) {
    userResource.set(userId, fetchUser(userId));
  }
  return userResource.get(userId)!;
}

function UserProfileContent({ userId }: { userId: string }) {
  // use() hook czeka na Promise i suspenduje rendering
  const user = use(getUserResource(userId));

  return (
    <View style={styles.profileContainer}>
      <Text style={styles.name}>{user.name}</Text>
      <Text style={styles.email}>{user.email}</Text>
    </View>
  );
}

export function UserProfile({ userId }: { userId: string }) {
  return (
    <Suspense
      fallback={
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" />
        </View>
      }
    >
      <UserProfileContent userId={userId} />
    </Suspense>
  );
}

const styles = StyleSheet.create({
  profileContainer: { padding: 16 },
  name: { fontSize: 24, fontWeight: 'bold' },
  email: { fontSize: 16, color: '#666', marginTop: 4 },
  loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

Hook use() z React 19 upraszcza asynchroniczne pobieranie danych poprzez integrację z Suspense. Ten wzorzec eliminuje boilerplate stanu ładowania i zapewnia spójną obsługę błędów w całej aplikacji.

Przejście na Nową Architekturę

React Native 0.86 kontynuuje proces wycofywania starej architektury. Choć bridge nadal pozostaje dostępny, deweloperzy powinni planować migrację na nową architekturę, zanim stanie się wymagana w przyszłych wydaniach.

NativeModuleExample.tsxtypescript

import { TurboModuleRegistry } from 'react-native';

// Definicja interfejsu modułu dla bezpieczeństwa typów
interface DeviceInfoModule {
  getDeviceName(): Promise<string>;
  getBatteryLevel(): Promise<number>;
  getSystemVersion(): string; // Metoda synchroniczna
}

// Dostęp do TurboModule
const DeviceInfo = TurboModuleRegistry.getEnforcing<DeviceInfoModule>('DeviceInfo');

export async function getDeviceDetails() {
  try {
    const [name, battery] = await Promise.all([
      DeviceInfo.getDeviceName(),
      DeviceInfo.getBatteryLevel(),
    ]);

    // Metody synchroniczne działają bez await
    const systemVersion = DeviceInfo.getSystemVersion();

    return {
      name,
      battery: `${(battery * 100).toFixed(0)}%`,
      systemVersion,
    };
  } catch (error) {
    console.error('Nie udało się pobrać szczegółów urządzenia:', error);
    throw error;
  }
}

TurboModules zapewniają synchroniczny dostęp do metod natywnych i bezpieczeństwo typów poprzez specyfikacje Codegen. Ta architektura eliminuje narzut serializacji JSON wymagany przez stary bridge.

Ulepszenia Obsługi Gestów

System gestów otrzymuje poprawki dotyczące konfliktów gestów edge i koordynacji między bibliotekami gestów. Gesty nawigacji systemowej integrują się teraz płynnie z własnymi obsługami gestów.

SwipeableCard.tsxtypescript

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  runOnJS,
} from 'react-native-reanimated';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const SWIPE_THRESHOLD = SCREEN_WIDTH * 0.3;

interface CardProps {
  title: string;
  onDismiss: () => void;
}

export function SwipeableCard({ title, onDismiss }: CardProps) {
  const translateX = useSharedValue(0);

  const panGesture = Gesture.Pan()
    // Unikanie konfliktów z nawigacją edge
    .activeOffsetX([-10, 10])
    .failOffsetY([-5, 5])
    .onUpdate((event) => {
      translateX.value = event.translationX;
    })
    .onEnd((event) => {
      if (Math.abs(event.translationX) > SWIPE_THRESHOLD) {
        translateX.value = withSpring(
          Math.sign(event.translationX) * SCREEN_WIDTH,
          {},
          () => runOnJS(onDismiss)()
        );
      } else {
        translateX.value = withSpring(0);
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <GestureHandlerRootView>
      <GestureDetector gesture={panGesture}>
        <Animated.View style={[styles.card, animatedStyle]}>
          <Text style={styles.title}>{title}</Text>
        </Animated.View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginVertical: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: { fontSize: 18, fontWeight: '600' },
});

Property activeOffsetX zapobiega przypadkowej aktywacji gestu podczas nawigacji edge. Ta konfiguracja zapewnia, że gesty karty aktywują się tylko przy zamierzonej interakcji użytkownika.

Gotowy na rozmowy o React Native?

Ćwicz z naszymi interaktywnymi symulatorami, flashcards i testami technicznymi.

Odkryj React Native

Pytania Rekrutacyjne React Native 0.86

Poniżej przedstawiono pytania techniczne często pojawiające się na rozmowach kwalifikacyjnych dotyczących React Native w 2026 roku.

Pytanie: Wyjaśnij, jak React Native 0.86 obsługuje tryb edge-to-edge na Androidzie 15.

Odpowiedź: React Native 0.86 naprawia API measureInWindow i KeyboardAvoidingView, aby zwracały poprawne wartości, gdy treść rozciąga się pod paskami systemowymi. Aplikacje powinny używać react-native-safe-area-context do uzyskania wartości insets i stosować je jako padding lub margin. Prop collapsable={false} jest wymagany na Viewach, które wymagają pomiarów, aby zapobiec ich optymalizacji przez React Native.

Pytanie: Jaka jest różnica między starą a nową architekturą w React Native?

Odpowiedź: Stara architektura używa asynchronicznego bridge z serializacją JSON do komunikacji między JavaScript a kodem natywnym. Nowa architektura wykorzystuje JavaScript Interface (JSI), umożliwiając synchroniczne wywołania między warstwami. TurboModules zastępują Native Modules z leniwym ładowaniem i bezpieczeństwem typów. Fabric Renderer zastępuje stary renderer bezpośrednim zarządzaniem drzewem natywnych widoków.

Pytanie: Jak zaimplementować prawidłowe unikanie klawiatury w widoku czatu?

Odpowiedź: Należy użyć KeyboardAvoidingView z behavior="padding" na iOS i behavior="height" na Androidzie. Wartość keyboardVerticalOffset powinna uwzględniać wysokość elementów nagłówka i insets nawigacji. Na Androidzie 15+ należy dodać insets.bottom do offsetu, aby uwzględnić tryb edge-to-edge. Kontener wejściowy powinien zawierać paddingBottom: insets.bottom dla prawidłowego pozycjonowania.

Pytanie: Jakie ulepszenia debugowania wprowadza React Native 0.86?

Odpowiedź: React Native DevTools oferują teraz inspekcję drzewa komponentów w czasie rzeczywistym bez wpływu na wydajność. Panel Network wyświetla szczegóły timingu, włączając DNS, TLS i transfer. Panel Performance integruje metryki z InteractionManager i custom measurements. Te narzędzia działają bez zewnętrznych proxy, co zmniejsza złożoność konfiguracji debugowania.

Pytanie: Wyjaśnij, jak hook use z React 19 działa z komponentami React Native.

Odpowiedź: Hook use() pozwala komponentom konsumować Promise bezpośrednio, zawieszając rendering do momentu rozwiązania. Łączy się z granicami Suspense dla stanów ładowania i Error Boundaries dla obsługi błędów. Promise powinny być tworzone poza komponentami lub memoizowane, aby uniknąć nieskończonych pętli renderowania. Ten wzorzec eliminuje ręczne zarządzanie stanem ładowania i zapewnia spójne wzorce pobierania danych.

Pytanie: Jak zapobiec konfliktom gestów między własnym gestem przesuwania a nawigacją systemową?

Odpowiedź: Należy skonfigurować rozpoznawacze gestów z odpowiednimi progami aktywacji. Ustawienie activeOffsetX wymaga minimalnego ruchu poziomego przed aktywacją. Ustawienie failOffsetY powoduje niepowodzenie gestu, jeśli ruch pionowy przekroczy próg jako pierwszy. Te konfiguracje pozwalają systemowym gestom edge działać bez zakłóceń, jednocześnie umożliwiając interakcje użytkownika w widoku.

Pytanie: Jakie kroki są wymagane do migracji na TurboModules?

Odpowiedź: Najpierw należy zdefiniować interfejs modułu w TypeScript lub Flow ze specyfikacją Codegen. Następnie zaimplementować natywny moduł zgodny z wygenerowanymi interfejsami. Użyć TurboModuleRegistry.getEnforcing() zamiast NativeModules. Metody synchroniczne mogą zwracać wartości bezpośrednio bez async/await. Przetestować dokładnie, ponieważ różnice w czasie mogą ujawnić ukryte warunki wyścigu.

Ścieżka Aktualizacji i Zgodność

Aktualizacja z React Native 0.85 wymaga minimalnych zmian dla większości aplikacji. Należy wykonać następujące kroki:

bash

# Aktualizacja pakietów
npm install react-native@0.86.0
npm install react@19.0.0

# Czyszczenie cache
npx react-native start --reset-cache

# Przebudowa natywnych zależności
cd android && ./gradlew clean && cd ..
cd ios && pod install --repo-update && cd ..

Aplikacje wykorzystujące biblioteki z natywnym kodem mogą wymagać aktualizacji tych zależności. Poniższe biblioteki zostały zweryfikowane jako zgodne z wersją 0.86: react-navigation 7.x, react-native-reanimated 4.x, react-native-gesture-handler 2.x oraz react-native-safe-area-context 5.x.

Podsumowanie

React Native 0.86 reprezentuje stabilne wydanie skupione na naprawie problemów z kompatybilnością Androida 15 i doskonaleniu doświadczenia deweloperskiego. Brak przełomowych zmian sprawia, że aktualizacja jest prosta dla większości projektów. Kluczowe ulepszenia obejmują poprawki pomiarów edge-to-edge, ulepszenia KeyboardAvoidingView, integrację z React 19 oraz ulepszone DevTools. Deweloperzy powinni priorytetowo traktować migrację na nową architekturę, aby przygotować się na przyszłe wymagania. Regularne testowanie na urządzeniach z Androidem 15 zapewnia prawidłowe działanie aplikacji w wymuszonej konfiguracji edge-to-edge.

React Native 0.86 w 2026: Edge-to-Edge na Androidzie, DevTools i Pytania Rekrutacyjne