コンテンツへスキップ

旅行＆地域のテンプレート

Roamly Travel Booking App

A tours and experiences app for a travel brand: find a trip by place or kind of tour, open a tour with its itinerary and meeting point, pick a date and travelers, and carry a QR pass to the meeting point. Travelers settle with the guide on the day; nothing is charged in the app.

  • 23画面
  • iOS & Android
  • Supabase が必要
  • 2026年11月4日更新
  • 検証済みリリース
  • 4件のコピー

無料でコピー · ソース全体 · クレジットカード不要

画面

実際に動作するアプリの6画面。

含まれる内容

  1. Explore with a floating search, kinds of tour and a featured trip
  2. Tour pages with a photo gallery, itinerary, meeting point and reviews
  3. Date and travelers in one step, with the total as you go
  4. A booking pass with a QR code the guide scans on the day
  5. Trips with a countdown, wishlist and notifications
  6. Supabase tours and bookings, with sample data until connected

このテンプレートについて

Overview

Roamly is a React Native app for a tour operator or travel brand selling small-group days and experiences. Travelers explore by place or kind of tour, open a tour with its photos, itinerary and meeting point, choose a date and how many people, and keep a pass with a QR code for the guide.

It opens on sample data so every screen works when you fork it: 16 tours with their own photos, sample trips that the first real booking replaces, and a wishlist that starts empty. Connect your Supabase project under Server and the same screens read your tours and bookings.

Key features

  • Explore — A floating search, kinds of tour (tours, food, outdoors, culture, water), a featured trip and what is trending this week.

  • Tour pages — A photo gallery, rating and reviews, what is included, an itinerary timeline and the meeting point on a map.

  • Book in three steps — Date and travelers, the lead traveler's details, then a review with the total; dates before today are never offered.

  • Settle on the day — The traveler pays the guide at the start of the tour; nothing is charged in the app.

  • Pass and trips — A pass with the date, meeting point and a QR code, trips with a countdown, cancel with a confirm, book again.

  • Wishlist and updates — Saved tours with undo, and notifications grouped by day.

Screens included

Welcome and account

  • Onboarding

  • Log in

  • Create account

  • You're in

  • Reset password

  • New password

Explore

  • Explore

  • Search

  • Search results

  • Tour detail

Booking

  • Choose a date

  • Your details

  • Review

  • Booking confirmed

Trips and profile

  • Trips

  • Trip pass

  • Wishlist

  • Notifications

  • Profile

  • Edit profile

  • About

  • Terms of use

  • Privacy policy

Built with

  • Framework — React Native and Expo SDK 57 on the FluxNative base 13 kernel: native iOS and Android, Liquid Glass chrome on iOS.

  • Backend — Supabase for accounts, tours, bookings, wishlist and notifications; a migration in the supabase folder adds itinerary, meeting point and guide.

  • Sample mode — With no backend connected, every service answers from realistic sample data kept on the device.

Good fit for

  • Tour operators selling small-group days and experiences

  • Destination brands with a catalog of bookable tours

  • Travel startups validating a tour-discovery product

travel bookingtour discoveryreact nativeexpowishlisttourismaccount auth

含まれるもの

  • ソース全体 — TypeScript の Expo と React Native。ワークスペース内のアプリとして届きます。
  • ライブプレビュー — 変更をブラウザやスマートフォンですぐ確認できます。
  • 検証済みリリース — コンパイルでき、すべての画面がエラーなく開きます。
  • AI アシスタント — チャットで何でも変更できます。変更ごとにクレジットを使います。
  • ビルドとストアへのアップロード — iOS と Android のビルドを、公開から App Store と Google Play に送れます。
  • コピーにクレジット不要 — コピー自体は無料です。

最新バージョンの FluxNative で作られています。

必要なもの

  • FluxNative アカウント — Free プランはアプリを2つまで持てます。
  • 独自の Supabase — あなたのデータ用です。それまではサンプルデータで動きます。
  • Creator 以上 — ネイティブビルドとストアへのアップロード用です。
  • ストアアカウント — 公開には Apple Developer Program（年額 99 米ドル）と Google Play（1回 25 米ドル）が必要です。

ソースに含まれるもの

画面
23
ファイル（コピーに含まれる）
386
行（このアプリのために書かれたコード）
9,501
個の既製 UI コンポーネント
142

アプリのテキスト: 英語、ベトナム語

技術スタック

Expo SDK
57.0.22
React Native
0.86.3
React
19.2.8
TypeScript
6.0.3
Expo Router
57.0.21
Supabase JS
2.112.0

このリリースの package.json より。

デザインシステム

見出し
Fraunces
本文
システムフォント
  • ライト・ダーク両対応
  • Liquid Glass
  • カプセル型ボタン
  • メディアカード

フォーク後のセットアップ

コピーは、それを作った AI アシスタントと一緒に開きます。手順を順に進めてください。手順が求めるものは Server で接続し、各プロンプトを送ります。

  1. Connect your Supabase project

    Add your Supabase project URL and access token under Server › Backend › Supabase first. Until then Roamly runs on sample tours and trips kept on the device.

    AI へのプロンプト

    Supabase is connected under Server. Create the tables this app reads (destinations, tours, reviews, profiles, wishlist, bookings and notifications) with row-level security so each traveler sees only their own bookings, apply the migration in supabase/migrations with the cancel_booking function and the avatars bucket, write the public values into .env, and check that Explore, a tour page, a booking and Trips work on my project.

  2. Add your tours

    Prepare your tours with photos, prices, dates, itinerary, meeting point and guide. Attach them as a spreadsheet and images to the message.

    AI へのプロンプト

    Use the attached tours and photos: load them into my Supabase project with each tour's itinerary, meeting point and guide, and replace the sample destinations and tours everywhere they appear.

  3. Set your app icon

    Make an AI logo or upload your own icon in App settings. The launcher icon, splash screen and store listing all use it.

    AI へのプロンプト

    I set a new app icon in App settings. Match the splash screen background and the Android icon background to its edge colour, so the icon sits on one continuous colour.

  4. Write your booking terms and legal pages

    Prepare your booking and cancellation terms, how travelers pay on the day, your support contact, privacy policy and terms. The app has its own Privacy and Terms screens with sample text to replace.

    AI へのプロンプト

    Replace the sample booking wording with mine: cancellations [your cancellation terms] and payment on the day [how travelers pay the guide]. Put my privacy policy and terms into the app's Privacy and Terms screens: [your privacy policy and terms], and set the support contact to [your support email].

  5. Check and publish a build

    Find a tour, book it, open the pass and cancel a trip on a phone, then build for the stores from Publish.

    AI へのプロンプト

    Run a final check of every screen in light and dark mode: onboarding, sign-in, Explore and search, tour pages, booking, the trip pass, Trips, wishlist, notifications and profile. Fix anything broken or still showing template content, then get the app ready for a store build.

このテンプレートの使い方

  1. テンプレートを使うと、ソースコード付きの編集できるコピーがワークスペースに作られます（テンプレート）。
  2. 変えたいことを AI アシスタントにふだんの言葉で頼みます（アシスタントと作業する）。
  3. 変更はライブプレビューやスマートフォンで確かめます（プレビュー）。
  4. Creator 以上のプランで、iOS と Android 向けにビルドしてストアに提出します（公開の概要）。

ライセンスとサポート

ライセンス

あなたのために作られたアプリはあなたのものです。テンプレートのコードは InspireUI に帰属し、あなたのアプリで使うためにライセンスされます（利用規約 › 当社の知的財産）。

ヘルプ

  • テンプレート、アシスタント、公開のガイド。
  • ヘルプからサポートに問い合わせ。通常1〜2営業日以内に返信します。
  • コピーでは、どの画面やファイルでも AI アシスタントに聞けます。

FluxNative 制作

サポートポリシー

質問

無料ですか？

無料テンプレートのコピーはクレジットも含め無料です。Premium はウェブサイトごとに1回の購入です。チャットでの変更とビルドにはクレジットを使います。

何を所有しますか？

あなた向けに作られたアプリはあなたのものです。テンプレートのコードは InspireUI のもので、あなたのアプリで使うライセンスが付与されます（利用規約 › 当社の知的財産）。

コードの知識は必要ですか？

いいえ。普通の言葉でアシスタントに変更を頼めます。必要ならソース全体も使えます。

バックエンドは付属しますか？

いいえ。完全なアプリは必要なバックエンドを示し、サーバーで自分のものを接続します。デザインはサンプルデータで動きます。

デザインは変更できますか？

はい。デザインタブでブランドカラー、色、フォント、角をクレジットなしで設定できます。残りはアシスタントが変更します。

公開にはどのプランが必要ですか？

Creator 以上で、ご自身の Apple と Google のアカウントでビルドとストアへのアップロードができます。Premium テンプレートのアプリは、ウェブサイトを接続すればどのプランでもビルドできます。

ソースをダウンロードできますか？

はい。ワークスペースでプラン、クレジット、有料テンプレートのいずれかを購入済みなら、ソースをダウンロードまたは GitHub にプッシュできます。Premium テンプレートのアプリはウェブサイトの接続も必要です。

以前の FluxNative で作った場合は？

コピーはそのまま動きます。アプリの言語や通貨などの新機能に更新するにはアシスタントに頼んでください。最後のセットアップ手順です。

自分のアプリにしてみませんか？

Roamly Travel Booking App から始めて、チャットで何でも変更できます。コピーには完全なソースコードが含まれます。

無料でコピー。クレジットカード不要。

Taking a little longer than usual…

Loading FluxNative