How to create a mobile app with AI: from the first screen to Android and iPhone

Is it realistic to make your own app with AI without experience?

Yes, a simple prototype can be assembled by describing the required behavior to the AI. But "seeing a screen on a phone" and "an app ready for the store" are different stages. Between them are data validation, storage, offline work, package building, and platform rules. Here, we will walk this path using a small shopping list in Ukrainian: add an item, mark it as bought, remove it.

AI helps in this task to create a program. The shopping list itself doesn't need to include a chatbot or call a paid API. It's a convenient first task: the result is easy to verify in a store, and no payments, camera, geolocation, or registration are required.

The table can be scrolled sideways →

PWA — a web application that, with appropriate settings, can be added to your phone's home screen. Capabilities depend on the browser and OS; the shortcut itself does not make the website a native app. If a page at the following link already solves your task, start with the guide about an AI website.

Beginner's roadmap: first, launch a single screen

React Native — a technology for mobile interfaces, and Expo — a toolkit around it. For your first introduction, there is Expo Snack: a browser-based editor. You can see the screen without setting up a full environment on your computer. This is a learning start, not a release to the store.

1. Open Snack on your computer and start a new example. In the file list, find App.js.
2. Download our full tutorial App.js, open it as text and copy the content into this file. Besides React and React Native, the example requires no additional libraries.
3. Enable web preview. You should see the title "My Shopping List", a name field, and an add button. Enter "Apples", add it, mark it as purchased, and delete it.
4. To view it on a physical phone, install the official Expo Go from your platform's store and use the QR code or the open action shown by Snack. Compatibility depends on the SDK chosen in the example and the installed version of Expo Go.
5. Test with dummy data. Before saving or sharing an example, check the project's visibility: do not paste private code, keys, or client data into the browser editor.

In the first file, the list only lives while the screen is running: it resets after a reload. This is an intentionally simple learning step. We will add persistent storage separately to first distinguish a button error from a storage error. The code itself does not send product names to a server.

If you want to get your own version rather than a copy of ours, give this brief to ChatGPT, Claude, or another assistant you already use. There is no need to buy several subscriptions at once.

Create an App.js for a React Native tutorial in Expo Snack. This is a shopping list in Ukrainian: a field up to 120 characters, adding a non-empty name, a separate "purchased" checkbox, and deletion. Identical names must be independent entries with unique IDs. An empty list should have a clear message. Use only React and React Native, without additional dependencies. For now, no persistent storage, registration, ads, server, API, or payments. Explain that data will disappear after a reload. Make large, labeled buttons and account for the keyboard. Provide the entire file and manual checks; do not claim that you ran it on my phone.

Second version: make the list useful in real life

Once adding and marking work, add local storage. For a non-secret list, AsyncStorage is suitable — a device-based key-value store supported in Expo Go. It does not encrypt data. Passwords and tokens should not be stored there. In a local Expo project, the library is installed with the command npx expo install @react-native-async-storage/async-storage; in Snack, it needs to be added to the example's dependencies.

Add local storage via @react-native-async-storage/async-storage to our shopping list. First, read the saved data; only allow writing after reading is complete; do not overwrite the old list with an initial empty state. Verify the structure of the read records. Anticipate reading or writing errors: show a message and do not promise successful saving. Do not add networking or an account. Explain which dependency to add to Snack or how to install it in a local Expo project. Provide a test case with two identical names, a 'bought' mark, and a restart.

Why is there a strange clarification about reading before writing in the task? A common mistake is to first write the initial empty list and only then read the old one. The user sees their purchases disappear. These are exactly the kinds of situations you should give an AI along with the requirement "save the data."

Choose one of the following functions for the next step: item quantity, categories, or search. A shared family list with synchronization already requires a server, login, and access rules. This is a separate level of complexity, not just another line in the prompt.

Seven checks before showing to others

The table can be scrolled sideways →

Web viewing does not prove that Android and iPhone behave the same way. Also, the Expo Go preview mode may require a network to download the project. For final testing offline, use an installed build.

When to move from Snack to a project on a PC

Switch when several screens, dependencies, a need for Git, or a release plan have emerged. You will need a computer, a current LTS version of Node.js, and an editor, for example Cursor following our step-by-step guide. In the terminal, create the project with the command npx create-expo-app@latest shopping-list and then follow the current Expo instructions.

During transitions between SDK versions, official pages may describe the default template differently. For Expo Go, choose the SDK that supports the specific installed app, and if necessary, explicitly specify the template from the documentation. Do not try to fix version conflicts blindly with dozens of reinstalls.

A modern template might use Expo Router: in that case, the main screen is a route file such as src/app/index.tsx, not App.js. You shouldn't just drop our Snack file next to it and expect it to run. Ask the agent to move the component into the actual starting screen of the project and check its imports.

First, read the package.json and the structure of this Expo project. Find out if Expo Router is used and where the actual starting screen is. Move the training component from Snack to the corresponding route, adapting JavaScript to TypeScript if necessary. Do not create a parallel, unused App.js. Verify SDK, Expo Go, and dependency compatibility against current official documentation. Preserve adding, marking, and deleting functionality. Separately specify what you actually ran and which Android/iOS checks are still needed.

For local viewing, use npx expo start. The computer and phone should usually be on the same Wi-Fi network; if a direct connection fails, the documentation provides a mode --tunnel. On a physical iPhone, the current instruction requires the same Expo account in both the CLI and Expo Go. If a library with its own native code is needed, Expo Go's capabilities might not be enough — switch to development builda separate development build.

If you want to build screens with a mouse: FlutterFlow

FlutterFlow is another route: the interface is built visually, and AI helps with parts of the work. This may be more convenient for those who find it easier to work with screens and properties. For the first exercise, create a page, add a text field, a list, and a button, link them to the page state, and check it in Test/Preview. Without configured actions, the appearance is not yet a working list.

According to the official comparison, Free gives two projects and five AI generations total, while Basic at $39/month (monthly billing) adds code and APK downloads. Prototype creation, AI limits, export, and publication are different tier features. Third-party agent accounts and service usage may be billed separately. Before choosing, check the pricing page and feature table.

APK, AAB, TestFlight: what "releasing an app" means

APK — an Android package that can be installed directly; AAB — a package format for Google Play. An Expo Go screen is neither of these. For Expo, you can use EAS Build: a service that builds mobile packages from your project. For internal Android testing, an APK is configured in the profile; for the store, a corresponding production build is required.

On iPhone, arbitrary APKs cannot be installed. Apple has its own signing and distribution methods, specifically TestFlight for testing and the App Store for publication. iOS cloud builds are possible via EAS, so a Mac is not mandatory for every operation; local iOS building requires a proper Apple environment.

Google Play Console registration costs a one-time fee of $25. For new personal accounts created after November 13, 2023, a closed test with at least 12 testers participating continuously for at least 14 days is required before accessing production, followed by an access application. This is not an automatic approval. The Apple Developer Program has a base cost of $99 per year; local prices and terms may vary.

Before submission, you also need a correct description, an icon, screenshots, data privacy information, and compliance with current store requirements. "One-click deployment" in a builder does not bypass moderation or guarantee publication.

How much it costs without the confusion

The table can be scrolled sideways →

We do not combine the tariffs of different alternatives into a "mandatory total": for a start, one route is enough. You don't need to pay for the builder and Expo together. Free development also doesn't mean unlimited work of a future AI service.

For pros: what to include in the first release

Fix dependency versions, Android/iOS identifiers, and separate development and release configurations. Verify local data migration, large fonts, the onscreen keyboard, returning from the background, write errors, and lack of network. Server-side access rules are required for synchronization; a hidden button in the UI does not replace them.

The paid AI API key must not end up in the mobile package: the app file can be inspected. If you add response generation, call it via your own server with user verification and a spending limit. Verify change history and backup restoration before inviting your first users. This is a direction for development after the training exercise, not features already implemented in our file.

There is a working example from our community — the Android notepad Origami Notes by BaraniukConnection. It shows why you should build your own tool. And you can discuss your own prototype in the Ukrainian Vibe Coding community: add the SDK version, platform, exact error, and expected behavior.

Sources and verification limits

Routes, features, and pricing have been verified against official documentation. The training list and prompts were created by the editorial team; file syntax and basic state transitions were verified locally. This is not an installation test on all Android/iPhones and is not a store publication report. Saving and synchronization are listed as next steps and are not in the starter file.

1. Expo: getting started and Snack link
2. Expo Snack: official browser environment code
3. Expo: learning to create an app with an AI agent
4. Expo: current project creation and SDK transitions
5. Expo: running on a device and logging in on iPhone
6. Expo: Expo Go limitations
7. Expo: AsyncStorage, installation, and unencrypted data
8. EAS Build: separate mobile packages and internal distribution
9. Expo: EAS pricing
10. FlutterFlow: pricing
11. FlutterFlow: plan comparison and AI quotas
12. FlutterFlow: AI tools and custom agent accounts
13. Google Play: registration and one-time fee
14. Google Play: testing new personal accounts
15. Apple Developer Program: enrollment and annual fee
16. MDN: PWA and web app installation
17. React Native: basic concepts and interactive Snack examples