React Native i Expo 2024

Co to jest React Native i jak różni się od React?

React Native: framework do tworzenia natywnych aplikacji mobilnych (iOS i Android) w React/JavaScript (Meta, 2015). Nie WebView — prawdziwe natywne komponenty! React vs React Native: React (DOM): div, span, button -> HTML elements -> Web. React Native: View, Text, TouchableOpacity -> UIView (iOS) / android.view.View (Android). Filozofia: 'Learn once, write anywhere' (nie 'write once, run anywhere'). Ten sam React paradigmat, inne komponenty. JavaScript Thread: kod JS uruchamia się w osobnym thread. New Architecture (Fabric): JSI (JavaScript Interface) — direct JS-Native bridge (C++). Bez starego asynchronicznego Bridge. Szybsze, synchroniczne wywołania. TurboModules: lazy loaded native modules. Codegen: automatyczne TypeScript -> native type definitions. Kluczowe komponenty: View — kontener (div). Text — tekst (zawsze w Text). Image — obrazy. ScrollView — przewijalna lista. FlatList — optymalizowana lista. TextInput — pole tekstowe. TouchableOpacity — dotykalne z opacity. Pressable — nowoczesny (v0.64+). StyleSheet: CSS-like inline styles. Flexbox (domyślnie column, nie row). Brak jednostek px (density-independent pixels). Platforma-specific: Platform.OS === 'ios' ? X : Y. Pliki .ios.tsx i .android.tsx.

Expo — co to jest i jak przyspiesza React Native development?

Expo: platforma i toolchain dla React Native (2016). Ułatwia: setup, development, building, deploying. Expo Go: aplikacja na iPhone/Android. Skanuj QR -> natychmiast testuj. Bez Xcode/Android Studio. Szybki prototyping. Expo SDK: zestaw modułów (camera, location, notifications, payments, file system). expo-camera, expo-location, expo-notifications, expo-file-system, expo-av (audio/video), expo-image-picker. Tryby Expo: Managed Workflow: Expo zarządza native code. Nie widzisz android/ i ios/. Ograniczone native modules. Bare Workflow: pełna kontrola nad native. Expo modules + custom native. Używaj gdy potrzebujesz custom native. EAS (Expo Application Services): EAS Build: cloud builds (iOS + Android bez Maca). EAS Submit: submit do App Store / Play Store. EAS Update: OTA updates (over-the-air). Natychmiastowe aktualizacje JS bez store review. Expo Router (file-system routing): app/ directory (jak Next.js). Automatyczne routing. Deep linking. Native navigation. Nowa era RN navigation. Expo vs bare React Native: Expo Managed: szybszy start, mniej konfiguracji. Bare/bez Expo: pełna kontrola, wszystkie native modules. Expo (2024): polecany dla większości projektów. EAS Build eliminuje główne bóle.

Navigation w React Native — React Navigation vs Expo Router?

React Navigation: najpopularniejsza biblioteka nawigacji (@react-navigation/native). Stack Navigator: ekrany jak stos (push/pop). @react-navigation/native-stack (native, szybszy). Tab Navigator: dolna belka nawigacji. Drawer Navigator: boczne menu. Nested navigators: Tab inside Stack. Konfiguracja: const Stack = createNativeStackNavigator(). NavigationContainer wrapper. Przejście między ekranami: navigation.navigate('Details', {id: 123}). navigation.push('Details'). navigation.goBack(). navigation.replace('Home'). Parametry: const {id} = route.params. TypeScript: RootStackParamList z parametrami per ekran. Expo Router (nowe): file-system routing (jak Next.js App Router). app/(tabs)/index.tsx — tab screen. app/user/[id].tsx — dynamic route. app/_layout.tsx — layout. Zalety Expo Router: link/ component (jak next/link). useLocalSearchParams() — params. URL-based navigation. Deep linking automatyczny. Universal (Web + Native). React Navigation vs Expo Router: React Navigation — dojrzały, elastic, ogromny ekosystem. Expo Router — nowe, file-system, universal (web + mobile). Expo Router to przyszłość. React Navigation nadal szeroko używany. Animacje nawigacji: react-native-reanimated — płynne animacje (60/120fps). react-native-gesture-handler — gesture recognition. Używane przez React Navigation i Expo Router.

State management i data fetching w React Native?

State management: te same opcje co React web. Zustand — polecany (prosty, mały bundle). Jotai — atomic model. Redux Toolkit + RTK Query — enterprise. TanStack Query (@tanstack/query-native): te same query/mutation co web. queryKey, staleTime, gcTime. useFocusEffect — refetch przy focus na ekran (React Navigation integration). AsyncStorage: @react-native-async-storage/async-storage. Persistentne przechowywanie klucz-wartość. MMKV: szybszy AsyncStorage (C++). react-native-mmkv. 10x szybszy od AsyncStorage. SQLite: expo-sqlite (Expo SDK 50+). SQLite na urządzeniu. Offline-first. Drizzle ORM + expo-sqlite. API calls: fetch (wbudowany). axios. TanStack Query do zarządzania. Offline support: react-query offline mutations. react-native-offline — status sieci. Optimistic UI dla mobilnych. Push Notifications: expo-notifications — Expo SDK. React Native Firebase (Cloud Messaging) — FCM/APNs. Expo Push Notification Service — cross-platform. Deep Linking: expo-linking. URL scheme: myapp://route. Universal links (iOS) / App Links (Android) — https://myapp.com/route. Metro Bundler: JavaScript bundler dla React Native. Szybszy HMR. Hermes: JS engine (Meta). Szybszy startup. Smaller app size. Używany domyślnie.

Kiedy React Native, kiedy Flutter, a kiedy natywne aplikacje?

React Native: JavaScript/TypeScript. React paradigmat. Dobry dla: web devs przechodzących na mobile. Projekty z istniejącym React teamem. Szybkie MVP. Kod współdzielony z web (logika, typy). Wady: native modules czasem wymagane. Performance gorszy niż natywny (ale bardzo dobry z Fabric). Flutter: Google. Dart lang. Własny rendering engine (Skia/Impeller). Identyczny wygląd na iOS i Android. Wady: Dart (mniejszy ekosystem). Duży bundle. Więcej boilerplate. Zalety: pixel-perfect, szybki, Google support. Natywne (Swift/Kotlin): najlepsza wydajność. Pełny dostęp do APIs. Wyższy koszt (2 osobne aplikacje). Kiedy natywne: games, AR/VR, complex animations, deeply platform-specific. Xamarin/MAUI (Microsoft): C# i .NET. Opcja dla .NET teamów. Kiedy React Native: startup/MVP. Mały/średni team. Web + mobile unified. Kiedy Flutter: design-heavy app. Animacje kluczowe. Google services. Gdy Dart/team OK. Kiedy natywne: banking/fintech z biometrics. Gry. AR. Max performance. Capacitor + Ionic: WebView-based (HTML/CSS/JS). Nie natywny rendering. Ale dostęp do native APIs. Cordova następca. Expo (2024): znacznie ułatwił React Native workflow. EAS Build bez Maca dla iOS.

Wyślij zapytanie