react-native-architecture

Skill do budowania gotowych do produkcji aplikacji mobilnych w React Native. Zawiera wzorce dla Expo, zarządzania stanem, integracji modułów natywnych i architektury offline-first. Przydatny przy tworzeniu nowych projektów, implementacji złożonych schematów nawigacji, łączeniu API platformy czy optymalizacji wydajności. Dokumentuje strukturę projektu, różnice między Expo a bare React Native oraz konfigurację CI/CD dla wydań mobilnych.

1. Utwórz nowy projekt Expo za pomocą komendy npx create-expo-app@latest my-app -t expo-template-blank-typescript, aby uzyskać bazę z TypeScript.

2. Zainstaluj niezbędne zależności: npx expo install expo-router expo-status-bar react-native-safe-area-context, które zapewniają routing, pasek statusu i bezpieczne obszary ekranu.

3. Zorganizuj strukturę projektu zgodnie z wytycznymi: umieść ekrany Expo Router w src/app/, komponenty UI w src/components/ui/, logikę biznesową w src/services/, a zarządzanie stanem w src/stores/.

4. Wybierz podejście — Expo dla szybkiego startu z wbudowanymi aktualizacjami OTA, lub bare React Native jeśli potrzebujesz bezpośredniego dostępu do kodu natywnego i niestandardowych modułów.

5. Implementuj nawigację za pomocą Expo Router, definiując grupy ekranów w katalogach (auth) i (tabs) oraz konfigurując layout główny w _layout.tsx.

6. Skonfiguruj offline-first architekturę poprzez usługi w src/services/, zapewniając synchronizację danych gdy urządzenie powróci do połączenia sieciowego.