When planning a trip, do you find yourself juggling three or four different apps — notes for destinations, a calendar for the schedule, and yet another app for the packing list?
It's a surprisingly common frustration. Off-the-shelf travel apps tend to be either too feature-heavy or missing the one thing you actually need. That's where building your own with Rork starts to make a lot of sense. You get exactly what you want, nothing more.
In this tutorial, we'll build a travel planner app that combines three core features: a destination list, a day-by-day itinerary, and a packing checklist — all in one place. No coding experience required.
What We're Building
The app will have three screens:
- Trip List screen: Cards showing destination, departure date, return date, and status (Planning / Confirmed / Done)
- Schedule screen: A day-by-day itinerary for each trip, with activities you can add and edit
- Checklist screen: A packing list tied to each trip, with checkboxes and category grouping
The key design challenge here is linking schedules and checklists to specific trips, which means we need to be precise in how we describe the data model to Rork.
Step 1: Creating the Project
Open Rork and start a new project. In the first prompt, describe the entire app structure at once — this gives Rork enough context to set up the architecture correctly from the start.
Build a travel planner app with the following structure:
[Screens]
1. Trip List screen (Home)
- Cards with destination name, departure date, return date, and status
- Status options: "Planning", "Confirmed", "Done"
- FAB (floating action button) in the bottom-right to add a new trip
- Tapping a card navigates to that trip's detail screen
2. Trip Detail screen (tab-based)
- "Schedule" tab: date-grouped list where activities can be added per day
- "Checklist" tab: packing list with add/check/delete functionality
[Design]
- Primary color: sky blue (#4FC3F7)
- Clean, readable typography
- Schedule screen groups activities under date headers
[Data]
- Save all data to AsyncStorage
- Data should persist across app restarts
Start with this and see what Rork generates. Don't aim for perfection on the first pass — get the structure right, then refine screen by screen.
Step 2: Refining the Trip List Screen
Once the list screen is generated, review it in Rork Companion and adjust anything that doesn't look right. For example, to update the status badge styling:
Update the status badges on the Trip List screen:
- "Planning" → gray background, dark text
- "Confirmed" → blue background (#4FC3F7), white text
- "Done" → green background (#66BB6A), white text
Make the badges small with rounded corners, placed below the destination name.
A good habit when prompting Rork for UI changes: always specify which screen, which element, and what you want it to look like. Vague prompts lead to unexpected results.
To sort trips by departure date:
Sort the trip list by departure date ascending (soonest first).
Move trips with status "Done" to the bottom of the list.
Step 3: Building the Schedule Screen
The schedule screen needs date-based grouping to be truly useful. If Rork's first attempt doesn't include this, follow up with:
Update the Schedule screen:
- Group activities under date headers (e.g., "April 25, Friday")
- Each activity has three fields: time, title, and notes (optional)
- Add a "+ Add Activity" button at the bottom of each date section
- Include an "Add Date" button to add a new day to the itinerary
One issue that comes up fairly often: date sorting breaks when dates are stored as informal strings like "April 25." To prevent this:
Store all dates in ISO 8601 format (e.g., 2026-04-25).
Display them formatted as "April 25 (Friday)" in the UI.
Sort by date ascending.
This keeps the underlying data clean while still showing human-readable labels.
Step 4: Adding the Packing Checklist
The checklist screen looks simple, but it requires careful scoping — each checklist should belong to one specific trip, not be shared across the app.
Update the Checklist screen:
- Each checklist is scoped to this specific trip (do not share lists between trips)
- Checking an item strikes it through
- Add an "Uncheck All" button at the top
- Group items by category: Clothing, Documents, Electronics, Other
- Long-press an item to delete it with a confirmation dialog
Add a quick-add template with common items:
passport, charger, medication, change of clothes, toiletries
The template feature is a small touch that makes the app noticeably more useful in practice — you're not starting from scratch every trip.
Step 5: Verifying Data Persistence
Before calling the app done, verify that data actually persists when you close and reopen the app. Test this in Rork Companion: add a trip, close the app, reopen it, and check that everything is still there.
If data disappears, send this prompt:
Please verify that all data — trips, schedules, and checklists — is saved to and loaded from AsyncStorage correctly.
If anything isn't persisting, fix the save and load logic so data survives app restarts.
Two Gotchas to Watch For
1. Schedule and checklist data gets mixed up between trips
When navigating from the trip list to a detail screen, Rork sometimes doesn't correctly scope the data to the selected trip. If you notice data from one trip appearing in another, fix it with:
The Trip Detail screen should receive the selected trip's ID as a navigation parameter.
All schedule and checklist data displayed and saved should be scoped to that specific trip ID only.
No data from other trips should appear.
2. Date pickers look very different on iOS vs Android
The default DatePicker component behaves differently across platforms. If consistency matters to you, either ask Rork to use a cross-platform library like react-native-date-picker, or use a plain text input (YYYY-MM-DD format) as a simpler workaround.
What's Next
This tutorial covered the core structure of a travel planner app in Rork. From here, you could extend it with a map view for activity locations ("add Google Maps integration so each activity can have a place attached"), or a budget tracker per trip.
The real value of building your own travel app isn't just the final product — it's that you can add exactly what you need, when you need it. Start with what's here, take it on your next trip, and let your own experience guide what to build next.
If you're new to Rork, Build Your First App in 30 Minutes is a great place to start. For a deeper look at data persistence, the Habit Tracker App Tutorial walks through AsyncStorage in more detail.