Tworzenie aplikacji mobilnych z Cursor

Twój zespół musi dostarczyć aplikację mobilną działającą zarówno na iOS, jak i Android. Projektanci przekazali Ci makiety w Figma, backend API już istnieje, a deadline jest za sześć tygodni. Wybrałeś React Native, ponieważ Twój zespół zna TypeScript, ale nikt nie ma głębokiego doświadczenia z natywnymi modułami. Pierwszy ekran zajął trzy dni, bo połowa czasu poszła na debugowanie problemów z Metro bundler, quirki ze stylowaniem specyficznym dla platformy i konfigurację biblioteki nawigacji. W tym tempie nie dotrzymasz deadline’u.

Cursor zmienia równanie dla rozwoju mobilnego, ponieważ rozumie Twoją strukturę projektu, bibliotekę komponentów i ograniczenia platformy jednocześnie. Zamiast przełączać kontekst między Stack Overflow, dokumentacją React Native i przewodnikami specyficznymi dla platformy, pozostajesz w edytorze i pozwalasz Agent obsłużyć cross-platformową złożoność.

Co wyniesiesz

• Konfigurację reguł projektu, która sprawia, że Cursor jest świadomy różnic między iOS a Android
• Prompty do generowania ekranów, przepływów nawigacji i komponentów specyficznych dla platformy
• Workflow do łączenia React Native z istniejącymi backend API
• Techniki debugowania problemów specyficznych dla mobile (Metro, natywne moduły, uprawnienia)
• Strategie obsługi ścieżek kodu specyficznych dla platformy w trybie Agent

Konfiguracja Cursor dla React Native

Projekty mobilne mają więcej kontekstu niż projekty webowe. Potrzebujesz, żeby Cursor rozumiał nie tylko Twój kod TypeScript, ale także Twoją natywną konfigurację (pliki projektu Xcode, konfiguracje build Gradle), strukturę nawigacji i nadpisania specyficzne dla platformy.

Zacznij od .cursorignore, który utrzymuje skupiony indeks:

.cursorignore

ios/Pods/
android/.gradle/
android/build/
android/app/build/
node_modules/
.expo/
*.lock

Katalogi natywnych zależności są ogromne i rzadko pomocne dla kontekstu AI. Wykluczenie ich przyspiesza indeksowanie i utrzymuje Agent skupionego na Twoim kodzie aplikacji.

Następnie utwórz reguły projektu, które kodują Twoją architekturę mobilną:

.cursor/rules/mobile.md

# React Native Project

## Stack
- React Native 0.84 (New Architecture, domyślna od 0.76 i jedyny runtime od 0.82)
- TypeScript strict mode
- React Navigation 7 (native stack)
- Zustand dla zarządzania stanem
- React Query dla wywołań API
- Nativewind (Tailwind CSS dla React Native)

## Konwencje platformy
- Pliki specyficzne dla platformy używają rozszerzeń .ios.tsx / .android.tsx
- Komponenty współdzielone idą do src/components/
- Ekrany idą do src/screens/ z jednym plikiem na ekran
- Nawigacja zdefiniowana w src/navigation/
- Warstwa API w src/api/ używająca hooków React Query

## Stylowanie
- Używaj Nativewind className do stylowania, nie StyleSheet.create
- Wszystkie odstępy używają jednostki bazowej 4px (p-1 = 4px, p-2 = 8px)
- Używaj SafeAreaView na poziomie ekranu, nie komponentu
- Testuj zarówno na iPhone SE (mały), jak i iPhone 15 Pro Max (duży)

## Ważne
- To jest React Native, nie React DOM. Nigdy nie używaj elementów HTML ani web CSS.
- Zawsze obsługuj zachowania zarówno iOS, jak i Android
- Testuj unikanie klawiatury na formularzach
- Używaj Platform.select() dla wartości specyficznych dla platformy
- Obrazy muszą zawierać warianty @2x i @3x

Tworzenie ekranów z projektów

Najczęstszym zadaniem w rozwoju mobilnym jest przekształcenie projektu w ekran. Cursor świetnie sobie z tym radzi, gdy podasz mu odpowiedni kontekst.

Wskazówka

Prompt do skopiowania dla generowania ekranu z opisu projektu:

@src/navigation/RootNavigator.tsx @src/components/Button.tsx @src/components/Input.tsx

Create a new screen at src/screens/ProfileScreen.tsx that implements a user profile editor:

1. Header: User avatar (circular, 80px) with camera icon overlay for photo change
2. Form fields: Display name, email (read-only), phone number, bio (multiline)
3. Section: Notification preferences with toggle switches for email, push, SMS
4. Bottom: "Save Changes" button using our Button component, disabled until changes are made
5. Loading state while fetching profile data
6. Keyboard avoiding view that scrolls the active field into view

Use React Query to fetch from GET /api/users/me and PATCH /api/users/me.
Use our existing Input and Button components.
Register the screen in RootNavigator.
Follow our Nativewind styling conventions.

Kluczem do dobrego generowania ekranów jest odwoływanie się do istniejących komponentów. Gdy wskażesz Agent na Button.tsx i Input.tsx, używa Twojego faktycznego API komponentu (props, warianty, style) zamiast wymyślać własne.

Obsługa różnic platformy

Gdy ekran musi zachowywać się inaczej na iOS i Android, bądź wyraźny:

@src/screens/ProfileScreen.tsx

The profile screen needs these platform-specific adjustments:

iOS:
- Use a large title navigation header (headerLargeTitle: true)
- Date picker should use the inline iOS style
- Haptic feedback on save button press

Android:
- Use a standard material header
- Date picker should use the Android dialog style
- Use the system back gesture, not a custom back button

Use Platform.select() for simple values. For complex differences,
create ProfileScreen.ios.tsx and ProfileScreen.android.tsx if needed.

Łączenie z backend API

Aplikacje mobilne są konsumentami API. Cursor może wygenerować całą Twoją warstwę integracji API, jeśli podasz mu kontrakt backendu.

Wskazówka

Prompt do skopiowania dla generowania warstwy API z React Query:

@src/api/client.ts

Here are the endpoints for our user feature:

- GET /api/users/me -> { id, name, email, phone, bio, avatar_url, preferences }
- PATCH /api/users/me -> accepts partial user object, returns updated user
- POST /api/users/me/avatar -> multipart form upload, returns { avatar_url }
- GET /api/notifications -> paginated list { data: Notification[], next_cursor }
- PATCH /api/notifications/:id/read -> marks notification as read

Generate React Query hooks in src/api/hooks/:
1. Each endpoint gets a custom hook with proper TypeScript types
2. Mutations should optimistically update the cache
3. The notifications hook should support infinite scroll with useInfiniteQuery
4. Error handling should show a toast using our showToast utility
5. Include retry logic for network failures (3 retries with exponential backoff)

Use our existing API client at src/api/client.ts for the base fetch function.

Praca z nawigacją

Nawigacja jest jedną z najbardziej podatnych na błędy części rozwoju React Native. Deep linking, struktury zakładek i stosy uwierzytelnione vs nieuwierzytelnione mają wszystkie subtelne wymagania konfiguracyjne.

Wskazówka

Prompt do skopiowania — refaktoryzacja struktury nawigacji:

@src/navigation

Refactor our navigation to support:
1. Auth flow: Login -> Register -> ForgotPassword (no back gesture to main app)
2. Main tabs: Home, Search, Notifications, Profile
3. Modal stack: any screen can present a modal (e.g., compose post, settings)
4. Deep linking: myapp://profile, myapp://post/:id, myapp://notifications

Requirements:
- The tab bar should hide when keyboard is open on Android
- Notifications tab should show an unread count badge
- Deep links should work when the app is cold-started
- Authenticated screens redirect to login if no token is present

Use React Navigation 7 with native stack.
Follow the navigator patterns already in our codebase.

Uwaga

Agent czasami generuje konfiguracje nawigacji, które działają na jednej platformie, ale crashują na drugiej. Zawsze testuj zmiany nawigacji na symulatorach zarówno iOS, jak i Android przed uznaniem ich za gotowe. Zwróć szczególną uwagę na obsługę gestów i konfigurację nagłówka, które znacząco różnią się między platformami.

Debugowanie problemów specyficznych dla mobile

Rozwój mobilny ma unikalną klasę bugów, które nie istnieją w rozwoju webowym: crashe Metro bundler, awarie linkowania natywnych modułów, problemy z uprawnieniami platformy i bugi renderowania specyficzne dla urządzenia. Tryb Ask w Cursor jest Twoim pierwszym narzędziem do tych problemów.

Problemy Metro Bundler

Wskazówka

Prompt do skopiowania — błąd Metro o nierozwiązanym module:

My React Native app fails to start with this Metro error:

error: Error: Unable to resolve module @react-navigation/native-stack
from src/navigation/RootNavigator.tsx

I have run npm install and the package is in node_modules.
What are the common causes of Metro not resolving installed packages?

Tryb Ask przeprowadzi Cię przez zwykłe podejrzane: przestarzały cache Metro (npx react-native start --reset-cache), brakującą konfigurację babel dla pakietu lub niezgodność wersji między pakietami React Navigation.

Awarie natywnych modułów

Wskazówka

Prompt do skopiowania — diagnoza awarii natywnego buildu/linkera:

After adding react-native-vision-camera, the iOS build fails with:

ld: framework not found AVFoundation
clang: error: linker command failed with exit code 1

But AVFoundation is a system framework. What is wrong?

I am using React Native 0.84 with the New Architecture.
My Podfile is at @ios/Podfile.

Agent może przeanalizować Twój Podfile i zidentyfikować brakujące instalacje pod, nieprawidłowe fazy build lub problemy z linkowaniem frameworka specyficzne dla nowej architektury.

Debugowanie problemów z układem

Bugi układu mobilnego są notorycznie trudne do debugowania, ponieważ nie możesz inspekcować elementów tak, jak w przeglądarce. Opisz wizualny problem Cursor:

Wskazówka

Prompt do skopiowania — cross-platformowy bug klawiatury/układu:

@src/screens/ChatScreen.tsx

The chat message list renders correctly, but when the keyboard opens:
1. The input field is hidden behind the keyboard on Android
2. On iOS, the list scrolls up correctly but there is a 20px gap at the bottom
3. The "scroll to bottom" FAB overlaps with the input field

Here is my current KeyboardAvoidingView setup. What is wrong
and how do I fix it for both platforms?

Budowanie funkcji offline-first

Aplikacje mobilne muszą działać bez niezawodnej łączności sieciowej. To jest problem przekrojowy, w którym Cursor może pomóc wpleść go przez Twój istniejący kod:

Wskazówka

Prompt do skopiowania dla dodania obsługi offline:

@src/api/client.ts @src/api/hooks/useNotifications.ts

Add offline support to our notification system:

1. Cache notification data in AsyncStorage with a 24-hour expiry
2. When offline, serve from cache and show an "Offline" banner
3. When back online, sync: fetch new notifications and mark queued reads
4. Queue read-marking actions while offline and replay when connected
5. Use React Query's built-in offline support (networkMode: 'offlineFirst')

Also create a useNetworkStatus hook that:
- Uses @react-native-community/netinfo
- Provides isConnected and connectionType
- Shows a non-intrusive banner when offline

Do not modify the existing hook APIs -- wrap them with offline awareness.

Kiedy to się psuje

Agent generuje kod specyficzny dla web w projekcie React Native. Dzieje się to, gdy Twoje reguły nie są aktywne lub gdy AI myli React DOM z React Native. Najczęstszy objaw: generowanie <div> zamiast <View>, lub używanie właściwości CSS jak box-shadow, które nie istnieją w React Native. Twoje reguły projektu powinny wyraźnie stwierdzać “To jest React Native. Nigdy nie używaj elementów HTML ani CSS specyficznego dla web.”

Pliki specyficzne dla platformy nie są wykrywane przez Metro. Jeśli Agent tworzy Component.ios.tsx, ale Metro wciąż ładuje bazowy Component.tsx, plik bazowy ma priorytet. Rozdzielczość platformy React Native wymaga albo plików specyficznych dla platformy bez pliku bazowego, albo pliku bazowego, który re-eksportuje ze specyficznych dla platformy.

Wygenerowany kod natywnego modułu się nie kompiluje. Agent może pisać mostki Objective-C i moduły Kotlin, ale konfiguracja build jest często błędna. Dla problemów z natywnymi modułami, dostarcz swój Podfile (iOS) lub build.gradle (Android) jako kontekst, aby Agent generował kompatybilne konfiguracje.

Typy React Navigation są nieprawidłowe. Typowanie nawigacji w React Navigation jest złożone. Jeśli Agent generuje ekrany z nieprawidłowymi parametrami route, odwołaj się wyraźnie do pliku src/navigation/types.ts. AI musi zobaczyć Twój typ RootStackParamList, aby wygenerować prawidłowe propsy nawigacji.

Style wyglądają inaczej na iOS i Android. Renderowanie cieni, wagi czcionek i padding zachowują się inaczej na różnych platformach. Gdy generujesz ekrany, powiedz Agent: “Użyj Platform.select dla cieni, ponieważ iOS używa shadowColor/shadowOffset, a Android używa elevation.”

Co dalej

Testing & TDD Skonfiguruj testowanie mobilne z Detox i Jest dla React Native.

CI/CD Zbuduj pipeline'y CI specyficzne dla mobile z EAS Build i Fastlane.

Performance Profiluj i optymalizuj renderowanie React Native i czas uruchamiania.