@startuml
skinparam style plain
skinparam backgroundColor #ffffff
skinparam defaultFontSize 13

package "JavaScript Thread" #e3f2fd {
  component "React Components\n(ваш код)" as react #1565c0
  component "React Native Runtime\n(react-native core)" as rn #1565c0
  component "JS Engine\n(Hermes / V8)" as js #1e88e5
}

package "Bridge" #fff3e0 {
  component "JSON Serialization\n(туди-назад)" as bridge #e65100
  note right of bridge
    Асинхронний, батчований.
    Дані серіалізуються у JSON
    і передаються між потоками.
    Це — вузьке місце класичної
    архітектури.
  end note
}

package "Native Thread" #e8f5e9 {
  component "Native Modules\n(Camera, GPS, тощо)" as native #2e7d32
  component "Shadow Thread\n(Yoga layout engine)" as shadow #388e3c
  component "Main Thread / UI Thread\n(рендеринг UI)" as ui #43a047
}

package "Екран пристрою" #f3e5f5 {
  component "UIView (iOS)\nView (Android)" as screen #6a1b9a
}

react --> js : виконання
js --> bridge : виклики API
bridge --> native : команди
bridge --> shadow : layout-запити
shadow --> ui : обчислений layout
native --> ui : нативні події
ui --> screen : рендер
screen --> bridge : events (onPress тощо)

@enduml

@startuml
skinparam style plain
skinparam backgroundColor #ffffff
skinparam defaultFontSize 13

package "JavaScript Thread" #e3f2fd {
  component "React Components\n(ваш код)" as react #1565c0
  component "Hermes Engine\n(оптимізований для RN)" as hermes #1e88e5
}

package "JSI — JavaScript Interface" #fff3e0 {
  component "Пряме C++ з'єднання\n(без JSON, без Bridge)" as jsi #e65100
  note right of jsi
    JSI — це C++ API, який дозволяє
    JS-об'єктам безпосередньо
    посилатися на C++ об'єкти.
    Виклики — синхронні!
  end note
}

package "Native Layer" #e8f5e9 {
  component "TurboModules\n(ліниве завантаження)" as turbo #2e7d32
  component "Fabric\n(новий рендерер)" as fabric #388e3c
  component "Yoga 2.0\n(layout engine)" as yoga #43a047
}

package "Екран" #f3e5f5 {
  component "Нативний UI" as screen #6a1b9a
}

react --> hermes
hermes --> jsi : синхронний виклик
jsi --> turbo : нативні API
jsi --> fabric : UI-оновлення
fabric --> yoga : layout
yoga --> screen : рендер

@enduml

@startuml
skinparam style plain
skinparam backgroundColor #ffffff
skinparam defaultFontSize 13

rectangle "Нативна розробка\n(Swift/Kotlin)" as native #43a047
rectangle "React Native\n(JS → Нативний UI)" as rn #1565c0
rectangle "Flutter\n(Dart → Власний рендерер)" as flutter #e65100
rectangle "Ionic/Capacitor\n(HTML у WebView)" as ionic #9c27b0
rectangle "PWA\n(Web у браузері)" as pwa #607d8b

note bottom of native
  ✓ Максимальна продуктивність
  ✓ Повний доступ до API
  ✗ Окремий код iOS/Android
  ✗ Потрібні різні мови
end note

note bottom of rn
  ✓ Нативний UI
  ✓ React-знання = старт
  ✓ Спільна бізнес-логіка
  ~ Обмеження через JS bridge
end note

note bottom of flutter
  ✓ Власний рендерер (Skia)
  ✓ Висока продуктивність
  ✗ Нова мова (Dart)
  ✗ Свій UI, не нативний
end note

note bottom of ionic
  ✓ HTML/CSS/JS
  ✓ Простий старт
  ✗ WebView продуктивність
  ✗ Не виглядає нативно
end note

note bottom of pwa
  ✓ Повна веб-екосистема
  ✓ Без App Store
  ✗ Немає доступу до API
  ✗ Тільки у браузері
end note

native -right-> rn : "наближається\nдо нативу"
rn -right-> flutter
flutter -right-> ionic
ionic -right-> pwa

@enduml

@startuml
skinparam style plain
skinparam backgroundColor #ffffff
skinparam defaultFontSize 13

@startmindmap
* React Native
** Expo
*** Managed Workflow
*** EAS Build
*** Expo SDK
**** Camera, Location, Notifications
**** FileSystem, Haptics, Font
** Навігація
*** Expo Router
*** React Navigation
** UI
*** React Native Paper
*** Tamagui
*** Gluestack UI
** Анімації
*** Animated API
*** Reanimated 3
*** Gesture Handler
** Дані
*** RTK Query
*** TanStack Query
*** AsyncStorage
*** SQLite
** Тестування
*** Jest
*** RNTL
*** Maestro
@endmindmap