Tworzenie aplikacji mobilnych w Cursorze

Tworzenie aplikacji mobilnych w Cursorze działa wtedy, gdy agent może sam sprawdzić swój wynik na urządzeniu. Reguła projektu ograniczona globami przypina wersje React Native i polecenia definiujące „gotowe”. Serwery MCP pozwalają agentowi zbudować, uruchomić aplikację i robić jej zrzuty ekranu na symulatorze iOS i emulatorze Androida. Każda zmiana trafia do przeglądu z wynikiem bramek i zrzutem ekranu z każdej platformy.

Ta strona jest dla programistów i tech leadów, którzy budują aplikacje React Native lub Expo w Cursorze. Znana sytuacja: Agent zrobił ekran profilu, który wygląda dobrze na otwartym akurat symulatorze iPhone’a, w opisie pull requesta stoi „gotowe”, a dwa dni później QA zgłasza, że na Androidzie klawiatura zasłania przycisk zapisu. Nikt nie przeczytał uważnie 600-liniowego diffu i nikt nie powinien być do tego zmuszony. Rozwiązaniem jest pętla, w której agent uruchamia aplikację na obu platformach i oddaje ci dowody.

Co daje zweryfikowana pętla mobilna w Cursorze

• Regułę projektu .cursor/rules/react-native.mdc, która powstrzymuje Agenta przed pisaniem kodu webowego i API ze starszego React Native.
• Dwa serwery MCP w .cursor/mcp.json, które dają Agentowi symulator i emulator do testów.
• Cztery prompty do skopiowania: przygotowanie reguły, ekran z projektu, poprawka błędu z jednej platformy i diagnoza nieudanego buildu natywnego.
• Tabelę bramek, która mówi, co dowodzi poprawności zmiany mobilnej i kto ją zatwierdza, więc przeglądasz zrzuty i wyniki testów zamiast każdej linii.
• Typowe awarie pracy mobilnej w Cursorze, każdą z krokiem naprawczym.

Receptury frameworkowe (dane offline-first, FlashList, biometria, buildy EAS, aktualizacje OTA) są w książce kucharskiej o aplikacjach mobilnych. Tutaj skupiamy się na tym, co należy do Cursora: kontekście, pętli agenta i dowodzie.

Jakie wersje zakłada ta strona?

Agenci mieszają API z kilku wersji głównych, bo dane treningowe obejmują je wszystkie, więc wersje należą do reguły, a nie do twojej pamięci. Tabela pokazuje, co npm serwował 26 września 2026; podmień liczby na te z twojego lockfile’a.

Pakiet	Wersja w npm, 2026-09-26	Po co agentowi ta wiedza
react-native	0.87.1 (Expo SDK 57 przypina 0.86.3)	Od 0.82 New Architecture jest jedyną architekturą; stare poradniki o modułach mostkowych nie mają już zastosowania
expo	57.0.26	Pakiety natywne dodawaj przez npx expo install, nigdy przez ręczną edycję wersji
@react-navigation/native	7.5.0	Typowane parametry tras pochodzą z twojego RootStackParamList
nativewind	4.2.7	Style przez className, nie StyleSheet.create, jeśli projekt go używa
@tanstack/react-query	5.104.0	Stan serwera i opcje networkMode dla zachowania offline
mobilebuildmcp	2.7.1	Buildy iOS, symulatory i testy dla agenta (dawniej xcodebuildmcp)
@mobilenext/mobile-mcp	1.0.6	Dotknięcia (tap), wpisywanie tekstu, zrzuty ekranu i logi na urządzeniach iOS i Android

Sam Cursor to linia 3.x, stan na 26 września 2026.

Skonfiguruj Cursora dla repozytorium React Native

Wykonaj te cztery kroki raz na repozytorium i zacommituj wynik, żeby Agent każdego członka zespołu startował z tym samym kontekstem. Jeśli nigdy nie pisałeś reguły Cursora, przeczytaj najpierw reguły projektu w Cursorze.

1. Napisz regułę mobilną ograniczoną do kodu aplikacji. Zapisz ją jako .cursor/rules/react-native.mdc (w formacie, którego używa strona o regułach projektu). Linia globs ładuje regułę, gdy Agent dotyka kodu aplikacji, i nic nie kosztuje, gdy Agent pracuje nad backendem.

   ---
   description: React Native app conventions and the done criteria for mobile changes
   globs: src/**/*.ts,src/**/*.tsx,app/**/*.tsx
   alwaysApply: false
   ---
   
   This is React Native 0.86 (New Architecture only) on Expo SDK 57, not React DOM.
   - Never use HTML elements (div, span, img, button), CSS strings or web-only style properties.
   - Add native packages with `npx expo install <pkg>`. Never change a version in package.json by hand.
   - Screens live in src/screens/, one per file. Register each in @src/navigation/RootNavigator.tsx
     and add its params to RootStackParamList in @src/navigation/types.ts.
   - Style with NativeWind className. Shadows: use the boxShadow style prop (RN 0.76+, New Architecture)
     or NativeWind shadow-* classes; never CSS strings or web-only properties.
   - Platform files (.ios.tsx / .android.tsx) take priority over the base file in Metro.
     Before editing a component, check whether a platform variant exists and edit that one too.
   
   Done means all of these pass, and you paste the output:
   1. npx tsc --noEmit
   2. npx expo lint
   3. npx jest --ci
   4. npx expo install --check   (native packages at the versions the SDK expects)
   5. rg -n "<(div|span|img|button|p)[ >]" src app   (must print nothing; list only folders that exist)
   6. For UI changes: a screenshot of every changed screen on the iOS simulator and the
      Android emulator, saved to evidence/<task>/ios-*.png and evidence/<task>/android-*.png

   W czystym React Native bez Expo zamień npx expo install na swój menedżer pakietów, a npx expo lint na swoje polecenie ESLint.

2. Odetnij agenta od zacommitowanych plików, których nie powinien czytać. Kod agenta Cursora wczytuje .gitignore tak samo jak .cursorignore (sprawdzone w @cursor/sdk 1.0.32, 2026-09-26), więc ignorowane przez gita node_modules/, ios/Pods/ i katalogi buildów nie potrzebują drugiego wpisu. .cursorignore służy do plików, które są w repozytorium, ale Agent nie powinien ich czytać ani naśladować. Uruchom git ls-files ios/Pods android/app/build | head, żeby sprawdzić, czy zespół coś z tego commituje, i wpisz tylko to, co się pojawi:

   # .cursorignore: committed files the agent must not read or imitate
   # (example entries; keep only paths that git ls-files shows in your repo)
   ios/Pods/
   android/app/src/main/assets/index.android.bundle
   **/__snapshots__/
   src/legacy-web/

   Nigdy nie ignoruj ios/Podfile, android/app/build.gradle ani app.json: Agent potrzebuje ich do naprawy błędów buildu natywnego. Składnię i błąd, który Agent zgłasza przy zablokowanej ścieżce, opisuje zarządzanie kontekstem w Cursorze.

3. Daj Agentowi urządzenie. Dodaj oba serwery do .cursor/mcp.json w katalogu głównym repozytorium. MobileBuildMCP (utrzymywany przez Sentry) buduje i testuje aplikacje iOS; wymaga macOS 14.5 lub nowszego i Xcode 16 lub nowszego. mobile-mcp (Mobile Next) steruje symulatorami iOS, emulatorami Androida i fizycznymi urządzeniami przez zrzuty ekranu i migawki dostępności; dla Androida potrzebuje narzędzi platformy (adb) w PATH.

   {
     "mcpServers": {
       "MobileBuildMCP": {
         "command": "npx",
         "args": ["-y", "mobilebuildmcp@latest", "mcp"]
       },
       "mobile-mcp": {
         "command": "npx",
         "args": ["-y", "@mobilenext/mobile-mcp@latest"]
       }
     }
   }

   Oba wpisy odpowiadają fragmentom konfiguracji dla Cursora od samych dostawców (strona MCP Clients w dokumentacji MobileBuildMCP i README mobile-mcp, sprawdzone 26 września 2026). MobileBuildMCP zgłasza własne błędy wykonania do Sentry; jego README linkuje instrukcję wyłączenia. Na Linuksie lub Windowsie pomiń MobileBuildMCP i zostaw mobile-mcp dla Androida. Każdy podłączony serwer to więcej narzędzi i opisów, spośród których Agent wybiera, więc włączaj je tylko w repozytorium aplikacji. Jak włączać, wyłączać i sprawdzać serwery, pokazuje konfiguracja serwerów MCP w Cursorze.

4. Sprawdź konfigurację przed pierwszym prawdziwym zadaniem. Otwórz nowy czat Agenta i poproś: „Use mobile-mcp to list the available devices, then use MobileBuildMCP to build the app for the first iPhone simulator. Report the tool calls you made.” Poprawna odpowiedź podaje prawdziwe ID urządzenia i pokazuje wywołanie narzędzia. Odpowiedź bez wywołania narzędzia oznacza, że serwer nie jest podłączony, a Agent zgadywał.

Opcjonalnie: skille frameworkowe dodają wiedzę specyficzną dla wersji i ładują się tylko wtedy, gdy zadanie jej potrzebuje. Zestaw React Native od Callstacka (społecznościowy, nie Meta) instalujesz dla Cursora narzędziem CLI skills, które obsługuje wielu agentów (1.7.0 w npm, 2026-09-26; zobacz instalowanie skilli i zarządzanie nimi): npx skills@latest add callstackincubator/agent-skills --skill react-native-best-practices --agent cursor -y. Zestawy dla Expo i Fluttera wymienia książka kucharska o aplikacjach mobilnych.

Prompt do skopiowania: szkic reguły mobilnej na podstawie repozytorium

Read package.json, the lockfile, app.json or app.config.ts, tsconfig.json, the
ESLint config, and the CI workflow files. Draft .cursor/rules/react-native.mdc with
frontmatter: description "React Native app conventions and the done criteria for
mobile changes", globs covering the app source folders you found, alwaysApply false.
The body has three parts, at most 40 lines in total:
1. The exact React Native, Expo, React Navigation and styling versions from the
   lockfile, and "This is React Native, not React DOM".
2. Conventions the repository actually follows (folders, navigation registration,
   styling, platform files), each with one real file path as the example.
3. A "Done means" list with the exact type-check, lint and test commands CI runs
   (copy them, do not invent any), plus a both-platform screenshot requirement.
Show me the file and list any command you could not find. Do not write it yet.

Zbuduj ekran z projektu: plan, implementacja, dowód

Praca nad ekranem psuje się na etapie planu, nie pisania. Zacznij w Plan Mode, zatwierdź plan, który wymienia pliki i testy, a potem przełącz się na Agent mode, żeby implementować pod bramki. Kiedy przełączać tryby, wyjaśniają tryby agenta w Cursorze.

Wskaż w prompcie istniejące komponenty przez @, żeby Agent użył ich prawdziwych propsów zamiast wymyślać nowe. Jeśli projekt jest w Figmie, pracę z Figma MCP pokazuje budowanie UI frontendu z projektów; poniższy prompt korzysta z pisemnej specyfikacji.

Prompt do skopiowania: ekran profilu z dowodami z obu platform

@src/navigation/RootNavigator.tsx @src/navigation/types.ts
@src/components/Button.tsx @src/components/TextField.tsx

Build src/screens/ProfileScreen.tsx, a profile editor:
- Avatar (80px circle) with a camera badge that opens the image picker.
- Fields: display name, email (read-only), phone, bio (multiline, max 280 chars).
- Toggles for email, push and SMS notifications.
- "Save changes" uses our Button, disabled until a field changes.
- Loading and error states for GET /api/users/me; save with PATCH /api/users/me.
- The focused field stays visible above the keyboard on both platforms.

Acceptance criteria as tests first: write src/screens/__tests__/ProfileScreen.test.tsx
with React Native Testing Library covering: save disabled until an edit, the bio
limit, and the error state. Show me the failing tests before implementing.

Then implement, register the screen in RootNavigator with typed params, and run
every "Done means" command from the react-native rule. Launch the app on the
iOS simulator and the Android emulator, open the screen, focus the bio field so
the keyboard is up, and save screenshots to evidence/profile-screen/.
Finish with: files changed, command results, screenshot paths, and anything that
looks different between iOS and Android.

Przeglądaj wynik w tej kolejności i zatrzymaj się na pierwszym problemie:

1. Lista plików. Uruchom git diff --stat. Zadanie ekranowe dotyka ekranu, jego testu, nawigatora i pliku typów. Cokolwiek w ios/ lub android/ to zmiana natywna, o którą nie prosiłeś: zapytaj Agenta dlaczego, zanim pójdziesz dalej.
2. Wyniki bramek. Wszystkie pięć poleceń przechodzi, a wyszukiwanie elementów webowych nic nie wypisało.
3. Zrzuty ekranu. Dwa obrazy z otwartą klawiaturą. Pole bio jest widoczne na obu, a przycisk zapisu osiągalny.
4. Testy. Otwórz tylko plik testów. To on jest specyfikacją; jeśli sprawdza to, o co prosiłeś, implementacji za nim nie trzeba czytać linia po linii.

Jeśli któryś krok zawiedzie, przywróć checkpoint sprzed tury implementacji, zamiast nakładać poprawki na złą bazę. Zobacz checkpointy i gałęzie.

Obsłuż różnice iOS i Androida bez dwóch baz kodu

Większość różnic między platformami to wartości, nie struktury. Wybierz najmniejsze narzędzie, które wyraża różnicę, bo każdy plik platformowy to drugie miejsce, w które musi trafić każda późniejsza poprawka.

Różnica	Użyj	Dlaczego
Wartość: android_ripple, styl paska stanu, padding, grubość czcionki, opcja nagłówka	Platform.select() w miejscu	Jeden plik, a różnica jest widoczna w przeglądzie
Komponent, który zachowuje się inaczej (date picker, haptyka, przepływ uprawnień)	Component.ios.tsx i Component.android.tsx obok wspólnego typu propsów	Metro ładuje najpierw plik platformowy; wspólny typ trzyma oba warianty w zgodzie
Coś, czego React Native nie udostępnia w API	Moduł natywny (Expo Modules API lub Turbo Module)	Wymaga przebudowy i recenzenta znającego Swift lub Kotlin; zobacz receptury natywne iOS i Android

Prompt do skopiowania: poprawka błędu widocznego tylko na jednej platformie

@src/screens/ChatScreen.tsx

Bug: on Android the message input is hidden behind the keyboard. On iOS the input
is visible but there is a 20px gap under it. The scroll-to-bottom button overlaps
the input on both.

1. Reproduce first: launch the app on the Android emulator and the iOS simulator,
   open ChatScreen, focus the input, and save "before" screenshots to
   evidence/chat-keyboard/.
2. Explain the cause for each platform in two sentences before changing code.
   Check app.json / AndroidManifest.xml for the windowSoftInputMode setting and
   whether a bottom tab bar offset is involved.
3. Fix it with Platform.select values where possible. Create platform files only
   if the component structure must differ, and tell me why.
4. Run every "Done means" command, then save "after" screenshots from both
   platforms. Do not change any file outside src/screens/ and src/components/
   without asking.

Zrzuty „przed” są równie ważne jak „po”. Poprawka sprawdzona tylko po zmianie nie pokaże, czy Agent odtworzył zgłoszony przez ciebie błąd, czy zupełnie inny.

Debuguj Metro, buildy natywne i awarie tylko na urządzeniu

Awarie mobilne często leżą poza kodem TypeScript: w cache’u Metro, CocoaPods, Gradle albo w brakującej przebudowie. Daj Agentowi pełny log i regułę, co wolno mu zmieniać, bo najszybszy sposób na zniknięcie błędu buildu to podbicie lub usunięcie zależności, a to rzadko jest poprawka, której chcesz.

Typowe pierwsze ruchy, które Agent powinien wykonać przed edycją jakiegokolwiek kodu:

Objaw	Pierwsze polecenie (terminal)
Unable to resolve module dla zainstalowanego pakietu	npx expo start --clear (Expo) lub npx react-native start --reset-cache (czysty RN)
Build iOS pada po dodaniu pakietu natywnego	npx expo prebuild --clean (Expo prebuild) lub cd ios && pod install (czysty RN)
Build Androida pada po dodaniu pakietu natywnego	cd android && ./gradlew clean, potem przebudowa
Zmiana w JavaScript działa, a zmiana natywna się nie pojawia	Przebuduj aplikację; przeładowanie Metro nie ładuje kodu natywnego

Prompt do skopiowania: diagnoza nieudanego buildu natywnego

The iOS build fails after I added react-native-vision-camera. Build it yourself
with MobileBuildMCP for the first available iPhone simulator and read the full
log, not only the last error.

Rules for this task:
- Do not upgrade, downgrade or remove any package, and do not edit package.json,
  without asking me first.
- Do not edit files under ios/Pods/ or any generated file.
- Try the cache and rebuild steps first (expo prebuild --clean or pod install),
  one at a time, rebuilding after each.

Report: the first real error in the log (not the last), its cause, the smallest
fix, and the build result after the fix. If the fix needs a version change, stop
and show me the two candidate versions from `npm view <pkg> versions` instead.

Awarie występujące tylko na urządzeniu lub w buildzie release opisuje sekcja o debugowaniu buildów release w React Native DevTools, a ogólną pętlę „najpierw odtwórz” — polowanie na błędy w Cursorze.

Jak weryfikować zmiany mobilne bez czytania każdej linii?

Każ Agentowi wytwarzać dowody i przeglądaj dowody. Lista „Done means” z reguły wymusza już większość z nich; ta tabela mówi, co łapie każda warstwa i kto za nią odpowiada.

Warstwa	Polecenie lub artefakt	Co łapie	Zatwierdza
Typy i lint	npx tsc --noEmit, npx expo lint	Złe propsy, złe parametry nawigacji, nieużywany kod	CI
Wyszukiwanie kodu webowego	rg -n "<(div|span|img|button|p)[ >]" src app	Elementy HTML, których tsc nie odrzuca w projekcie React Native	CI
Zgodność zależności	npx expo install --check (Expo)	Pakiety natywne w wersjach, których SDK nie oczekuje	CI
Testy jednostkowe	npx jest --ci z React Native Testing Library	Zachowanie zapisane jako kryteria akceptacji	Programista, który prowadził zadanie
Dowody z urządzenia	Jeden zrzut na zmieniony ekran na platformę w evidence/<task>/	Błędy układu, klawiatury, safe area i specyficzne dla platformy	Programista, który prowadził zadanie
Przepływy end-to-end	Przepływy Maestro w .maestro/ (zobacz wzorce testowania aplikacji mobilnych)	Zepsutą nawigację, deep linki i bramki logowania	CI, przy każdym pull requeście
Zmiany natywne	git diff --name-only | grep -E '^(ios|android)/' coś wypisuje	Nieproszone zmiany natywne, które wymagają przebudowy i recenzenta natywnego	Tech lead lub właściciel części natywnej
Wydanie	Stopniowy rollout w sklepie, a w Expo sprawdzenie fingerprintu przed każdą aktualizacją OTA	Zły build trafiający do wszystkich użytkowników	Tech lead

W wyszukiwaniu kodu webowego podaj tylko foldery, które istnieją w repozytorium: rg kończy się kodem 2 przy brakującej ścieżce, takiej jak app, i bramka pada wtedy z niewłaściwego powodu. Na runnerze CI bez ripgrepa zainstaluj go albo uruchom grep -rnE z tym samym wzorcem.

Bramki, które nie potrzebują urządzenia, uruchamiaj w CI, żeby zielony pull request oznaczał już, że przeszły typy, lint, wyszukiwanie kodu webowego i testy jednostkowe; workflow pokazują pipeline’y CI/CD z Cursorem. Zrzuty ekranu trzymaj w opisie pull requesta, a jeśli zespół go przyjął, używaj formatu pakietu dowodów. Recenzent czyta wtedy, co zmieniło się w zachowaniu, a nie diff.

Co się psuje, gdy agent Cursora pracuje nad aplikacją mobilną?

Agent pisze kod webowy. Objaw: <div>, onClick, webowe klasy narzędziowe w className albo style={{ cursor: 'pointer' }} w ekranie. Przyczyna: reguła się nie załadowała: jej globs nie obejmują folderu, który Agent edytował, albo frontmatter jest błędny. Naprawa: popraw globy lub frontmatter, zacznij nowy czat, potwierdź załadowanie testem kanarkowym ze strony o regułach projektu i zostaw wyszukiwanie elementów webowych w CI, żeby kolejna wpadka zatrzymała build.

Poprawka trafia do złego pliku platformowego. Objaw: Agent edytował DatePicker.tsx, testy przechodzą, a na urządzeniu nic się nie zmienia. Przyczyna: istnieje DatePicker.ios.tsx, a Metro ładuje go najpierw. Naprawa: poproś Agenta o listę wariantów przez ls src/components/DatePicker*, nanieś poprawkę na każdy i zostaw w regule linię o plikach platformowych.

Zmiana natywna bez przebudowy. Objaw: Agent melduje, że funkcja działa, ale zrzut pokazuje stare zachowanie albo czerwony ekran „native module not found”. Przyczyna: Metro przeładował tylko JavaScript. Naprawa: przebuduj przez MobileBuildMCP albo npx expo run:android i wymagaj świeżego zrzutu po przebudowie.

Agent „naprawia” build, zmieniając wersje. Objaw: build jest zielony, a package.json lub lockfile się zmienił. Naprawa: przywróć checkpoint, uruchom ponownie prompt diagnozy buildu z zakazem zmiany wersji i zostaw w CI bramkę npx expo install --check, żeby niedopasowany pakiet natywny głośno padał.

Przetestowano tylko jedną platformę. Objaw: podsumowanie ma zrzuty z jednego symulatora. Przyczyna: Agent użył urządzenia, które akurat było uruchomione. Naprawa: odrzuć wynik i poproś o brakującą platformę; lista „Done means” wymienia obie, więc to złamanie reguły, na które możesz się powołać.

Serwer MCP nie widzi urządzenia. Objaw: pusta lista urządzeń albo „no booted simulator”. Naprawa: uruchom symulator w Xcode lub emulator w Android Studio, sprawdź adb devices dla Androida i poproś Agenta o ponowne wylistowanie urządzeń. Na maszynie bez Xcode MobileBuildMCP w ogóle nie zbuduje iOS; używaj mobile-mcp z Androidem, a iOS sprawdzaj na Macu kolegi lub w CI.

Typy nawigacji się rozjeżdżają. Objaw: tsc zgłasza błąd przy navigation.navigate('Profile', …) po dodaniu ekranu. Przyczyna: Agent zarejestrował ekran, ale nie zaktualizował RootStackParamList. Naprawa: wskaż w prompcie src/navigation/types.ts przez @; reguła już go wymienia, więc jeśli się nie załadowała, powtórz prompt w nowym czacie.

Dokąd dalej z aplikacjami mobilnymi w Cursorze

Wzorce React Native Dane offline-first, FlashList, bramki biometryczne i wydania w sklepach, dla Cursora, Claude Code i Codeksa.

Wzorce Expo Skille i MCP Expo, bramki logowania w Expo Router, buildy EAS i stopniowe aktualizacje OTA.

Wzorce testowania aplikacji mobilnych Przepływy Maestro, macierze urządzeń i testy offline dla bramek opisanych wyżej.

TDD w Cursorze Zatwierdź nieprzechodzące testy jako specyfikację, a Agent implementuje do zielonego.

Integracje API z Cursorem Typowana warstwa API, którą wywołują twoje ekrany, z ponowieniami i testami.

Budowanie z Cursorem Wszystkie przewodniki budowania w Cursorze, od czatu z agentem do zweryfikowanej zmiany.