Site Haus Back to Site Haus

Build a mobile app

Pro

Describe an iPhone and Android app, see it running in a phone-shaped preview, and change it by chatting. Built with Expo (React Native).

A mobile app is an app for phones. Site Haus builds it with Expo, a popular way to make one app that runs on both iPhone and Android, written in React Native.

Make one#

  1. On the home screen, choose the Mobile tab above the box.
  2. Describe the app: what it does, who uses it and the screens it needs. For example: A habit tracker with a daily checklist, streaks and a calm dark mode. Press Tab to use the example in the box.
  3. Press the arrow. The AI writes the app and the preview opens in a phone-shaped frame.

You can also ask for it in your own words in any project, or from your own AI: say "Expo" or "React Native" and the app is made as a mobile app.

Turn a website into a mobile app (and back)#

Open any website or web app project and press Make a mobile app in the top bar. Site Haus makes a new project, copies your website into it for reference, and the AI rebuilds it as an Expo app: the same look, text and screens, with touch-friendly controls. Your website is not changed.

After that, a Web | Mobile switch appears in the top bar of both projects. Press it to jump back and forth. Each one has its own chat and its own versions, so you can keep improving the website and the app separately.

To remove the mobile app, press the bin button next to the Web | Mobile switch and confirm. It moves to Recently deleted for 2 days, so you can bring it back, and your website is not touched. Afterwards the top bar offers Make a mobile app again.

From a mobile app you can press Make a website the same way. Pressing it again later opens the website you already made instead of making a copy.

You can also ask your connected AI: "Turn this into a mobile app". See Connect your own AI.

The preview#

The first time you press Start app, Site Haus installs the app's packages and starts it. That takes a few minutes the first time (an Expo app has a lot of packages) and is quick after that. The app then runs in your browser through React Native for Web, in a phone-sized frame. Use the device buttons above the preview to see it wider.

The preview is the same code that runs on a phone, but a browser is not a phone. Things that depend on the phone itself (the camera, notifications, haptic feedback) do not work in the preview.

Change it#

Chat as usual: add a settings screen with a dark mode switch, make the buttons bigger, save the list on the phone. The AI writes React Native, keeps the files tidy (screens, components) and uses packages from the Expo SDK.

The project is made of normal files you can open in the code view: App.js is the first screen, app.json holds the app's name and its ids for the App Store and Google Play.

Try it on a phone#

Press Start app, then Test on phone in the top bar. A code appears:

  1. Install the free Expo Go app on your phone (App Store or Google Play).
  2. Scan the code. On an iPhone use the Camera app and tap the banner; on Android scan it inside Expo Go.
  3. Your app opens on the phone. It is the same app as in the preview, and it stops when you stop the app in Site Haus.

iPhone: Expo Go on an iPhone only opens an app when the same Expo account is signed in on the phone and here. In the Test on phone box, make a free access token at expo.dev (Account settings → Access tokens), paste it into the box and press Connect. Site Haus restarts the app for you. No Terminal and no password needed. Then, in Expo Go, tap the avatar at the top right and sign in with the same account. Android does not need this. (npx expo login in the Terminal does not work here, because it needs a web browser on the same machine.)

The first load can take a minute. Your phone needs internet, and Expo Go must be up to date (it runs the newest Expo version).

To share a version of your app that people can open in a browser, press Publish: that puts the web version on its own address. Building the iPhone and Android versions for the App Store and Google Play is not done for you yet: see Publish your mobile app to the stores.

Limits#

  • The app has no server of its own. It keeps data on the phone, or calls other services over the internet.
  • Packages that only work on a phone are fine to add, but they cannot be shown in the browser preview.
  • Pro and Power plans include server apps (see Server apps, databases and storage).