Have you ever installed your freshly built Rork app, opened it for the first time, and felt a little lost staring at a blank list with not a single row in it? Apps generated from a description prompt come out remarkably clean when there is data to show. The screens for when there is nothing yet, though, barely get any attention unless you ask for them explicitly.
These "nothing here" screens are called empty states. They are easy to overlook, yet every user passes through them the moment they open your app for the first time. Leave them blank and people quietly assume something is broken, then drift away. As an indie developer, I have shipped a number of apps to the App Store and Google Play, and the single change that reduced first-day churn the most was, surprisingly, taking the time to polish these empty screens.
An empty screen is not just one thing
If you treat empty states as "the screen when there is no data," you will design them wrong. The same blankness covers three very different situations, and each one calls for a different message.
The first is the first-run empty state: the app has just been installed and the user has registered nothing yet. What they want to know here is simply, "What do I do next?"
The second is the post-deletion empty state: every task is done, or every saved item has been cleared. This feels nothing like the first run. The user already knows how things work, so instructions are unnecessary. A small sense of accomplishment, or a gentle nudge toward the next step, fits much better.
The third is the network-error empty state: there is data, but a failed fetch makes the screen look empty. If you show "Nothing here yet" in this case, the user will think their data is gone. The right message is something like, "We couldn't load this. Please try again," paired with a way to retry.
Just separating these three changes the feel of your empty screens completely.
How to prompt Rork for empty states
Rork generally won't build what you don't describe. The flip side is that if you ask for empty states directly, it will produce them. Adding a line like this when generating works well:
For the list screen, create a first-run empty state for when there are zero items.
Center a soft illustration or icon, a "No ◯◯ yet" heading, a one-line note,
and an "Add your first ◯◯" button.The key is to insist that the empty state include a button that drives the next action. An empty state is not just a notice; it is the entry point that guides the user to their first interaction. Even if your app is already generated, you can tell Rork in chat, "The screen when there are zero tasks feels bare, please add an empty state," and it will add just that screen.
For the error case, make it clear it is a different screen from the first run:
When data fails to load, show a screen separate from the first-run empty state.
Display a "Couldn't load" heading and a "Reload" button that retries the fetch on tap.Check the conditional logic in the code
Peek at the code Rork generates and you can see how the empty states are controlled. In React Native it usually comes down to a branch like the one below. You don't need to understand it perfectly, but being able to read "which screen shows in which state" makes your change requests far more precise.
function ItemList({ items, isLoading, hasError, onRetry, onAdd }) {
if (isLoading) {
return <LoadingSpinner />;
}
if (hasError) {
// Network error: make clear the data is not gone
return (
<ErrorState
title="Couldn't load"
actionLabel="Reload"
onAction={onRetry}
/>
);
}
if (items.length === 0) {
// First run / post-deletion: point to the next step
return (
<EmptyState
title="No items yet"
message="Tap the button at the bottom right to add your first item"
actionLabel="Add item"
onAction={onAdd}
/>
);
}
return <List data={items} />;
}What matters in this branch is putting the hasError check before items.length === 0. Reverse the order and a failed fetch with an empty array will also show the first-run message, making users suspect their data has vanished. It is worth confirming once that the generated code follows this order.
Watch all three states with your own eyes
No matter how carefully you design them, you can't know how they look until you see them on a device. Reproduce each of the three on purpose. The first-run state appears if you reinstall the app or clear all data. The post-deletion state shows up as you remove your registered items one by one.
The slightly fiddly one is the network-error state. You can reproduce it easily by turning on airplane mode and then opening a screen that fetches data. Tap "Reload" while still in airplane mode, check that the error screen doesn't freeze, then turn airplane mode off and tap again to confirm the data comes back. Running that round trip once lets you verify ahead of time how the app behaves when a user loses signal. With apps that carry AdMob ads, I've found that layout breakage during unstable connections feeds straight into review ratings, so this is a check I never skip.
Tone and whitespace convey care
Because an empty state shows so little, every word stands out. A screen that says only "No data" and one that says "No records yet. Why not start with today?" leave completely different impressions. The first feels mechanical; the second keeps a trace of the writer's warmth. It helps to match the wording of your empty states to the overall voice of the app.
Place an illustration or icon in the center with generous space above and below, and the blankness starts to read as intentional calm rather than something unfinished. This part is hard to invest much in, but with Rork you can simply ask, "Add a friendly illustration to the empty state," and the mood comes together. For the broader thinking on screen design, the UX Design Patterns for Rork Apps piece covers related ground.
Start with the first-run empty state
Trying to perfect all three at once tends to stall you. The one to fix first is the first-run empty state, since it is the screen the most users are guaranteed to pass through. A single button pointing to the next step there visibly changes first-day retention. Open your app right now and clear its data to see that screen. If it looks bare, the place to start is asking Rork to add an empty state. If you'd like the bigger picture of Rork itself, see Rork — Overview of the Mobile App Platform Built with AI.
Thank you for reading. The smaller the screen, the more clearly it shows the care you put into your users.