React Native 0.86 у 2026: Edge-to-Edge на Android, DevTools та Питання для Співбесіди

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 тепер повертає правильні координати на Android 15+
    buttonRef.current?.measureInWindow((x, y, width, height) => {
      const position: TooltipPosition = {
        x: x + width / 2,
        // Координати точні навіть з увімкненим edge-to-edge
        y: y + height + 8,
      };
      console.log('Позиція підказки:', position);
    });
  }, []);

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View ref={buttonRef} collapsable={false}>
        <TouchableOpacity onPress={showTooltip} style={styles.button}>
          <Text style={styles.buttonText}>Показати Підказку</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' },
});

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}
      // Виправлення 0.86: behavior="padding" працює правильно з edge-to-edge
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      // keyboardVerticalOffset тепер враховує системні 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="Введіть повідомлення..."
          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 },
});

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__) {
        // Інтеграція DevTools: метрики з'являються в панелі 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 };
}

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('Не вдалося отримати користувача');
  return response.json();
}

// Створення ресурсу поза компонентом для оптимального кешування
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() очікує Promise та призупиняє рендеринг
  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' },
});

import { TurboModuleRegistry } from 'react-native';

// Визначення інтерфейсу модуля для типобезпеки
interface DeviceInfoModule {
  getDeviceName(): Promise<string>;
  getBatteryLevel(): Promise<number>;
  getSystemVersion(): string; // Синхронний метод
}

// Доступ до TurboModule
const DeviceInfo = TurboModuleRegistry.getEnforcing<DeviceInfoModule>('DeviceInfo');

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

    // Синхронні методи працюють без await
    const systemVersion = DeviceInfo.getSystemVersion();

    return {
      name,
      battery: `${(battery * 100).toFixed(0)}%`,
      systemVersion,
    };
  } catch (error) {
    console.error('Не вдалося отримати деталі пристрою:', error);
    throw error;
  }
}

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()
    // Уникнення конфліктів з крайовою навігацією
    .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' },
});

# Оновлення пакетів
npm install react-native@0.86.0
npm install react@19.0.0

# Очищення кешу
npx react-native start --reset-cache

# Перебудова нативних залежностей
cd android && ./gradlew clean && cd ..
cd ios && pod install --repo-update && cd ..