Від React до React Native: ключові відмінності

Те, що ви вже знаєте — і те, що зміниться

Якщо ви пишете на React, ваші знання не зникають — вони переносяться. Компонентна модель, хуки, JSX, однонаправлений потік даних, TypeScript — все це залишається незмінним. Але React Native — це інша платформа, і вона диктує інші правила для UI-рівня.

Уявіть аналогію: ви програміст, який знає алгоритми і структури даних. Ці знання універсальні — вони однаково застосовуються у Python, Go чи Rust. Але синтаксис, стандартна бібліотека, інструменти — різні. Так само і тут: React — це «алгоритми», а React Native — нова «мова» для мобільної платформи.

У цій статті ми систематично пройдемо всі ключові відмінності — від концептуальних до практичних. До кінця у вас буде чіткий «словник перекладу» з React у React Native.

Відмінність 1: DOM не існує

Що таке DOM у веб-React

У браузері React рендерить компоненти у Document Object Model (DOM) — деревоподібну структуру HTML-елементів, якою керує браузер. Коли ви пишете <div className="container">, React створює вузол DOM-дерева, браузер малює його на екрані відповідно до CSS-правил.

// Веб React: JSX → Virtual DOM → реальний DOM
function App() {
    return (
        <div className="container">
            <h1>Заголовок</h1>
            <p>Параграф тексту</p>
            <button onClick={() => alert('Привіт!')}>Натисни</button>
        </div>
    )
}

Браузер розуміє <div>, <h1>, <p>, <button> — це стандарт HTML, визначений специфікацією W3C.

Що відбувається у React Native

React Native не має браузера. Він виконується безпосередньо на iOS або Android. Тому він не знає, що таке <div> або <p>. Замість DOM він використовує нативні компоненти — JavaScript-обгортки над платформо-специфічними елементами UI:

• На iOS <View> стає UIView (UIKit)
• На Android <View> стає android.view.View
• На iOS <Text> стає UILabel
• На Android <Text> стає TextView

// React Native: JSX → Shadow Tree → нативні UIView/View
import { View, Text, Pressable } from 'react-native'

function App() {
    return (
        <View style={styles.container}>
            <Text style={styles.heading}>Заголовок</Text>
            <Text>Параграф тексту</Text>
            <Pressable onPress={() => alert('Привіт!')}>
                <Text>Натисни</Text>
            </Pressable>
        </View>
    )
}

Повна таблиця відповідностей: HTML → React Native

Відмінність 2: CSS не існує — є StyleSheet

Що зникає разом з DOM

У браузері стилі — це CSS: каскад, специфічність, псевдокласи, медіазапити, анімації через @keyframes, Grid, Float, селектори. React Native не має жодного з цього. Причина проста: немає браузерного движка, немає CSS-парсера.

Натомість React Native використовує StyleSheet — JavaScript-об'єкт зі стилями, який за синтаксисом нагадує CSS, але є лише його невеликою підмножиною.

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

function Card() {
    return (
        <View style={styles.card}>
            <Text style={styles.title}>Заголовок</Text>
            <Text style={styles.body}>Текст картки</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: '#ffffff',
        borderRadius: 12,
        padding: 16,
        // Тінь на iOS:
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        // Тінь на Android (elevation):
        elevation: 3,
    },
    title: {
        fontSize: 18,
        fontWeight: '700',
        color: '#1a1a1a',
        marginBottom: 8,
    },
    body: {
        fontSize: 14,
        color: '#666666',
        lineHeight: 20,
    },
})

Що є у StyleSheet, чого немає в CSS, і навпаки

CSS-властивості, які ДОСТУПНІ у React Native (з відмінностями):

CSS-можливості, яких у React Native НЕМАЄ зовсім:

Чому StyleSheet.create(), а не звичайний об'єкт?

Технічно можна писати стилі як звичайний JS-об'єкт:

// Це теж працює, але не рекомендується:
<View style={{ backgroundColor: 'red', padding: 16 }}>

Але StyleSheet.create() має переваги:

1. Перевірка типів — TypeScript підкаже, якщо ви напишете неправильну властивість
2. Оптимізація — у New Architecture стилі реєструються один раз і передаються за ID, а не копіюються щоразу
3. Читабельність — стилі відокремлені від розмітки, як у CSS-in-JS бібліотеках

Відмінність 3: Обробка подій

onClick → onPress (і набагато більше)

У вебі майже всі інтерактивні елементи отримують події через onClick. На мобільному пристрої немає миші — є дотик (touch). Це породжує іншу модель подій:

<Pressable onPress={() => console.log('натиснуто')}>
    <Text>Кнопка</Text>
</Pressable>

<Pressable
  onPressIn={() => setScale(0.95)}
  onPressOut={() => setScale(1)}
>

<Pressable onLongPress={() => showContextMenu()}>

<TextInput onChangeText={(text) => setValue(text)} />

Повна таблиця відповідностей подій

Відмінність 4: Браузерні API зникають

React Native виконується поза браузером, тому всі window.*, document.* та подібні API недоступні. Ось повна таблиця замін:

Відмінність 5: Платформо-залежна поведінка iOS vs Android

На відміну від веб-браузерів, де є стандарт (W3C), iOS і Android — це дві різні платформи з різними конвенціями, шрифтами і поведінкою UI. React Native намагається надати єдиний API, але деякі речі різняться:

const styles = StyleSheet.create({
    box: {
        // iOS — через shadow-властивості:
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.15,
        shadowRadius: 6,

        // Android — через elevation:
        elevation: 5,

        // Обидва на одному компоненті — кожна
        // платформа використовує своє:
        backgroundColor: '#fff', // обов'язково для iOS shadow
    },
})

const styles = StyleSheet.create({
    text: {
        // iOS: системний шрифт — San Francisco
        // Android: системний шрифт — Roboto
        // fontFamily: undefined → кожна платформа
        // використовує свій системний шрифт

        // Кастомний шрифт однаковий на обох платформах:
        fontFamily: 'Inter_400Regular',
    },
    boldText: {
        // На iOS fontWeight: 'bold' = SF Pro Bold
        // На Android fontWeight: 'bold' = Roboto Bold
        fontWeight: 'bold',
    },
})

import { KeyboardAvoidingView, Platform } from 'react-native'

// Поведінка при появі клавіатури різна:
;<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>{/* форма */}</KeyboardAvoidingView>

// iOS: клавіатура перекриває контент знизу,
//      KeyboardAvoidingView з 'padding' додає відступ
// Android: система автоматично коригує layout
//          (windowSoftInputMode: adjustResize)

// iOS: Stack-навігація зі swipe-back (свайп вліво = назад)
// Android: кнопка «Назад» (hardware або в navigation bar)

// Обробка кнопки "Назад" тільки на Android:
import { BackHandler } from 'react-native'
import { useEffect } from 'react'

useEffect(() => {
    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
        // true — ми обробили подію, система не реагує
        // false — система обробляє стандартно
        return true
    })
    return () => subscription.remove()
}, [])

Перший живий приклад: React Native у браузері

Завдяки компоненту ::react-native-preview ви можете побачити React Native компоненти прямо у браузері — вони рендеряться через react-native-web. Це не повноцінний емулятор, але достатньо для розуміння базових концепцій UI.

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

export default function FirstExample() {
    const [count, setCount] = useState(0)
    const [pressed, setPressed] = useState(false)

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Мій перший RN-компонент</Text>
            <Text style={styles.subtitle}>Це нативні компоненти, а не HTML</Text>

            <View style={styles.counterBox}>
                <Text style={styles.counterLabel}>Лічильник</Text>
                <Text style={styles.counterValue}>{count}</Text>
            </View>

            <Pressable
                style={[styles.button, pressed && styles.buttonPressed]}
                onPress={() => setCount((c) => c + 1)}
                onPressIn={() => setPressed(true)}
                onPressOut={() => setPressed(false)}
            >
                <Text style={styles.buttonText}>Натисни мене</Text>
            </Pressable>

            <Pressable style={styles.resetButton} onPress={() => setCount(0)}>
                <Text style={styles.resetText}>Скинути</Text>
            </Pressable>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 24,
        backgroundColor: '#f8f9fa',
    },
    title: {
        fontSize: 22,
        fontWeight: '700',
        color: '#1a1a2e',
        marginBottom: 8,
        textAlign: 'center',
    },
    subtitle: {
        fontSize: 13,
        color: '#6c757d',
        marginBottom: 32,
        textAlign: 'center',
    },
    counterBox: {
        backgroundColor: '#ffffff',
        borderRadius: 16,
        padding: 24,
        alignItems: 'center',
        marginBottom: 24,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.08,
        shadowRadius: 8,
        elevation: 3,
        width: '100%',
    },
    counterLabel: {
        fontSize: 12,
        color: '#6c757d',
        textTransform: 'uppercase',
        letterSpacing: 1,
        marginBottom: 8,
    },
    counterValue: {
        fontSize: 64,
        fontWeight: '800',
        color: '#4361ee',
    },
    button: {
        backgroundColor: '#4361ee',
        paddingVertical: 16,
        paddingHorizontal: 40,
        borderRadius: 12,
        marginBottom: 12,
        width: '100%',
        alignItems: 'center',
    },
    buttonPressed: {
        backgroundColor: '#3451d1',
        opacity: 0.9,
    },
    buttonText: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: '600',
    },
    resetButton: {
        paddingVertical: 12,
    },
    resetText: {
        color: '#6c757d',
        fontSize: 14,
    },
})

Зверніть на декілька речей у цьому прикладі:

1. Немає <div> чи <button> — лише <View>, <Text>, <Pressable> з react-native
2. Стан (useState) — ідентичний веб-React, жодних відмінностей
3. StyleSheet.create() — всі стилі зосереджені внизу, stilo CSS-in-JS
4. pressed стан — onPressIn/onPressOut дозволяють змінювати стиль «під час натискання» — це мобільний аналог CSS :active
5. [styles.button, pressed && styles.buttonPressed] — масив стилів, де другий перекриває перший

Практика

function ProfileCard({ name, role, avatar }: { name: string; role: string; avatar: string }) {
    const [liked, setLiked] = useState(false)

    return (
        <div className="card" style={{ padding: 20, borderRadius: 12 }}>
            <img src={avatar} alt={name} width={64} height={64} />
            <h2>{name}</h2>
            <p style={{ color: 'gray' }}>{role}</p>
            <button onClick={() => setLiked((l) => !l)}>{liked ? '❤️ Вподобано' : '🤍 Вподобати'}</button>
        </div>
    )
}

import { View } from 'react-native'

function BuggyComponent() {
    return (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
            <span onClick={() => console.log('click')}>Натисни мене</span>
            <p className="text" style={{ color: 'blue' }}>
                Параграф
            </p>
            <img src="https://example.com/photo.jpg" />
        </div>
    )
}