· Workflow · 9 menit baca

Tangkapan layar App Store Expo: Mengapa EAS Submit melewatinya dan cara menyelesaikannya dengan cepat (2026)

Tangkapan layar App Store Expo: Mengapa EAS Submit melewatinya dan cara menyelesaikannya dengan cepat (2026)
TL;DR. EAS Submit mengunggah .ipa/.aab-mu ke App Store Connect dan Play Console — dan hanya itu yang dilakukannya untuk listing-mu. Ia tidak menghasilkan, mengunggah, atau mengelola tangkapan layar toko. Jadi developer Expo perlu pipeline tangkapan layar terpisah: ambil frame dari dev/preview build (simulator, emulator, atau Maestro/Detox), lalu susun dan lokalisasi panel marketing-nya. Artikel ini membahas perintah pengambilan secara jujur, lalu di mana alat komposisi masuk — alat itu tidak mengambil apa pun untukmu.

Jika kamu merilis aplikasi Expo, jalur rilismu mungkin berakhir di satu baris: eas submit. Ia mengambil build yang dihasilkan EAS dan menyerahkannya ke Apple atau Google. Bersih, membosankan, andal. Lalu kamu membuka App Store Connect untuk mengaktifkan build — dan slot tangkapan layarnya kosong. Setiap kali.

Ini sering membingungkan banyak orang karena EAS terasa seperti melakukan segalanya. Ia membangun, menandatangani, mengirimkan. Masa ia tidak menangani tangkapan layar juga? Tidak, dan dokumentasinya mengatakannya dengan jelas. Ini bukan bug atau fitur yang hilang yang bisa kamu laporkan — ini memang di luar cakupan EAS Submit.

Apa yang sebenarnya dilakukan (dan tidak dilakukan) EAS Submit

EAS Submit adalah layanan pengiriman binary. Ia mengunggah tepat satu hal: arsip aplikasi yang dikompilasi — .ipa untuk iOS, .aab untuk Android — ke pipeline pemrosesan toko. Dokumentasi Expo menyatakan batasannya secara eksplisit:

"EAS Submit uploads your binary but does not manage store listing metadata, screenshots, or release notes."

Ada alat pendamping, EAS Metadata, yang bisa mengotomasi sebagian listing App Store-mu — nama aplikasi, subjudul, deskripsi yang dilokalisasi, kata kunci, URL dukungan — dari file konfigurasi. Alat ini benar-benar berguna dan layak untuk dipasang. Tapi baca cakupannya dengan cermat: tangkapan layar tidak termasuk di dalamnya. EAS Metadata mendorong teks, bukan gambar. Tangkapan layarmu, di kedua toko, tetap menjadi tanggung jawabmu untuk dibuat dan diunggah.

Jadi masalah tangkapan layar Expo terbagi menjadi dua pekerjaan yang berbeda, dan ada baiknya kamu memisahkannya dalam pikiranmu:

  1. Ambil frame — dapatkan frame mentah layar-layar aplikasimu dari sebuah build.
  2. Susun & lokalisasi — ubah frame mentah tersebut menjadi panel marketing bingkai, berteks, multi-bahasa yang sebenarnya ditampilkan toko.

EAS tidak melakukan keduanya. Panduan aset toko dari Expo sendiri di sini mengarahkanmu untuk mengambil frame sendiri dan mendesain panel di alat seperti Figma. Mari kita bahas keduanya dengan perintah konkret.

Pekerjaan 1: Mengambil frame dari dev atau preview build

Kamu ingin tangkapan layar dari aplikasi yang sebenarnya, jadi kamu perlu aplikasi berjalan di suatu tempat yang bisa kamu ambil. Untuk Expo itu berarti dev client atau preview build — bukan Expo Go, karena Expo Go menampilkan UI wrapper Expo dan konfigurasi native-mu mungkin berbeda. Build dan jalankan secara lokal dengan perintah Expo standar:

  • npx expo run:ios — melakukan prebuild native iOS, mengompilasi, dan menjalankan aplikasimu di iOS Simulator.
  • npx expo run:android — hal yang sama untuk emulator Android (atau perangkat yang terhubung).

Dengan aplikasi tampil di layar iOS Simulator, pengambilan cukup dengan satu perintah dari terminal Mac-mu:

xcrun simctl io booted screenshot home.png

booted menargetkan simulator yang sedang berjalan dan menulis PNG piksel-presisi ke direktori kerjamu. Dua flag penting untuk pekerjaan toko: --type=png (default, dan yang diinginkan toko) serta --mask=ignored versus --mask=black — mask mengontrol apakah notch dan sudut melengkung dirender ke dalam gambar. Untuk unggahan App Store, kamu biasanya ingin piksel persegi panjang yang datar, lalu tambahkan bingkai perangkat belakangan saat komposisi, sehingga pengambilan tanpa mask biasanya menjadi titik awal yang tepat.

Di Android, ambil langsung dari emulator (atau perangkat) dengan adb:

adb exec-out screencap -p > home.png

Gunakan exec-out, bukan shell screencap. Jalur shell biasa menyalurkan PNG melalui pseudo-terminal yang merusak binary pada beberapa setup (kamu mendapat file korup dengan carriage return liar); exec-out mengalirkan byte-byte secara langsung dan merupakan bentuk yang andal. Jika kamu menjalankan beberapa emulator, targetkan salah satunya dengan adb -s <serial> dari adb devices.

Itulah seluruh toolkit pengambilan manual: dua perintah, satu per platform, tanpa dependensi selain Xcode dan Android SDK yang sudah kamu miliki untuk build native Expo.

Pekerjaan 1, terotomasi: Maestro atau Detox

Menavigasi ke layar yang tepat dan menjalankan perintah-perintah itu secara manual tidak masalah untuk beberapa tangkapan layar. Begitu kamu punya delapan layar di dua kelas perangkat, atau ingin tangkapan layar diperbarui di setiap rilis agar tidak pernah berbeda dari UI yang sebenarnya, kamu mengotomasi pengambilan dengan alat pengujian end-to-end yang bisa menjalankan aplikasi dan mengambil frame.

Maestro adalah yang digunakan Expo sendiri dalam contoh EAS Workflows yang didokumentasikannya. Flow-nya ditulis dalam YAML biasa, yang membuat hambatan masuknya rendah. Sebuah flow yang mengarahkan ke sebuah layar dan mengambil gambarnya terlihat seperti ini:

appId: com.you.yourapp --- - launchApp - tapOn: "Get started" - assertVisible: "Your dashboard" - takeScreenshot: dashboard

Jalankan dengan maestro test flows/home.yaml. Perintah takeScreenshot menulis PNG ke direktori output pengujian (arahkan MAESTRO_TESTS_DIR ke mana pun kamu ingin aset tersimpan). Flow yang sama berjalan di CI pada EAS Workflows — contoh yang didokumentasikan Expo membangun .apk dengan build profile e2e-test lalu menjalankan flow .maestro/ terhadapnya — sehingga kamu bisa menyambungkan pengambilan tangkapan layar ke job yang sama yang menjalankan suite e2e-mu.

Detox adalah opsi mapan lainnya, dengan API JavaScript yang lebih terprogram dan ketat:

const path = await device.takeScreenshot('dashboard');

Jujurlah dengan dirimu sendiri tentang setup Detox-dengan-Expo. Detox tidak secara resmi mendukung Expo. Dalam praktiknya ia bekerja jika kamu menjalankan npx expo prebuild untuk menghasilkan proyek native dan membangun release-style client (bukan dev client) agar JS bundle tertanam — lalu arahkan Detox ke binary tersebut. Ini lebih banyak bagian yang bergerak dibanding YAML Maestro, dan imbalannya adalah sinkronisasi dan API assertion Detox yang lebih ketat. Jika kamu sudah menjalankan Detox, manfaatkan untuk pengambilan; jika kamu memilih dari awal dan tujuanmu adalah tangkapan layar toko, Maestro adalah jalur yang lebih ringan.

Pekerjaan 1, manual: pilihan tepat untuk rilis yang jarang

Otomasi sepadan ketika kamu sering merilis. Jika kamu melakukan satu hingga tiga rilis setahun — yang menggambarkan kebanyakan aplikasi Expo indie — memasang flow Maestro atau konfigurasi Detox untuk pengambilan tangkapan layar adalah pekerjaan yang kamu bayar sekali dan hampir tidak terbalas. Untuk frekuensi itu, cukup:

  1. Jalankan build dengan npx expo run:ios / run:android, isi dengan data demo yang realistis.
  2. Navigasikan ke setiap layar utama secara manual.
  3. Ambil masing-masing dengan perintah simctl / adb di atas.

Dua puluh menit mengklik jauh lebih baik daripada setengah hari membangun test harness yang akan kamu lupakan cara merawatnya di rilis berikutnya. Tidak ada yang salah dengan pengambilan manual — toko tidak bisa membedakan bagaimana PNG dibuat.

Pekerjaan 2: Komposisi dan lokalisasi 50 bahasa

Inilah bagian yang sengaja tidak disentuh oleh alat pengambilan, dan inilah bagian yang benar-benar dinilai oleh toko. PNG simctl mentah adalah UI aplikasimu di latar putih. Yang mendapat peringkat di pencarian dan mengkonversi di halaman produk adalah panel marketing: tangkapan layar di dalam bingkai perangkat, di latar bermerek, dengan satu baris teks yang menjelaskan mengapa layar itu penting — biasanya sebagai korsel multi-panel yang dibaca dari kiri ke kanan. Dan di App Store, tangkapan layar dilokalisasi per ukuran perangkat dan per bahasa, sehingga peluncuran serius berarti puluhan varian, bukan lima.

Inilah celah terbatas di mana Mokbi masuk, dan penting untuk tepat tentang batasannya. Mokbi tidak mengambil aplikasimu — kamu tetap menghasilkan frame sumber dengan perintah Expo di atas. Yang dilakukannya adalah mengambil frame-frame tersebut dan membiarkanmu, di browser: memasukkannya ke bingkai perangkat nyata, menambahkan teks dan latar gradien, menata korsel multi-panel, menerjemahkan teks teks satu klik ke 50 bahasa, dan mengekspor massal setiap dimensi App Store dan Play Store sekaligus. Kamu mendesain gratis dengan pratinjau berair; ekspor tanpa batas hadir dengan langganan — Solo €29.99/mo (1 aplikasi) atau Studio €49.99/mo (hingga 5 aplikasi), tanpa pembelian satu kali. Ini menggantikan langkah templat Figma yang ditunjuk panduan Expo secara samar — tidak lebih, tidak kurang.

Alur kerja kombinasi yang realistis

  1. Bangun dev/preview client. npx expo run:ios dan npx expo run:android, diisi dengan data demo yang baik.
  2. Ambil frame sumber. Secara manual via xcrun simctl io booted screenshot dan adb exec-out screencap -p, atau terotomasi via Maestro takeScreenshot / Detox device.takeScreenshot — idealnya di EAS Workflows agar diperbarui di setiap rilis.
  3. Susun panel marketing. Bingkai, tambahkan teks, dan atur korsel dari frame mentah tersebut.
  4. Lokalisasi dan ekspor massal. Terjemahkan teks ke bahasa target-mu, ekspor setiap dimensi yang diperlukan untuk kedua toko.
  5. Unggah aset listing. Tangkapan layar ke App Store Connect dan Play Console; padukan dengan EAS Metadata untuk bidang teks jika kamu menggunakannya.
  6. Kirimkan binary. eas submit — satu-satunya langkah yang memang dimiliki EAS.
  7. Rilis berikutnya: ambil ulang layar yang berubah, buka kembali proyek komposisi yang tersimpan, ganti frame, ekspor ulang. Teks dan terjemahan tetap ada.

Kapan kamu bisa melewati otomasi

Gunakan Maestro atau Detox untuk pengambilan ketika drift tangkapan layar benar-benar menjadi biaya nyata: kamu merilis setiap minggu, UI-mu terus berubah, atau kamu mengelola banyak aplikasi dan tidak bisa membiarkan gambar toko jadi usang. Dalam kasus itu frame yang diperbarui CI sepadan biayanya dan kisah tooling tangkapan layar React Native (yang diwarisi Expo) layak investasinya.

Untuk semua orang lainnya — yang merilis sekali per kuartal — lewati saja. Pengambilan manual dengan dua perintah terminal, lalu komposisi dan lokalisasi berbasis browser, mengantarmu ke listing yang rapi dan multi-bahasa dalam satu sore tanpa ada yang perlu dirawat di antara rilis. Sesuaikan tooling dengan frekuensimu, bukan dengan apa yang terlihat mengesankan di dashboard CI.

Bagaimanapun, separuh binary sudah terselesaikan: eas submit menanganinya. Pastikan kamu memeriksa tangkapan layarmu terhadap persyaratan toko saat ini sebelum mengunggah — Apple menolak listing karena satu piksel meleset — dan sisanya dari peluncuran hanya tinggal desain.

Bacaan selanjutnya

Buka editor →