feat: add expo mobile template

README.md

@@ -110,6 +110,7 @@ project, please check the [project management guide](./PROJECT.md) to get starte
 - **Deploy** directly to **Netlify**, **Vercel**, or **Cloudflare Pages**
 - **Guided Setup Wizard** for Supabase and Firebase connections
 - **Import Figma designs** to generate starter UI code.
+ - **Mobile starter templates** for React Native and Expo with [QR-code previews](docs/docs/mobile-preview.md) via Expo Go.
 
 ## Setup
 

app/utils/constants.ts

@@ -33,6 +33,14 @@ export const STARTER_TEMPLATES: Template[] = [
     tags: ['mobile', 'expo', 'mobile-app', 'android', 'iphone'],
     icon: 'i-bolt:expo',
   },
+  {
+    name: 'React Native',
+    label: 'React Native',
+    description: 'React Native CLI starter for building native mobile apps',
+    githubRepo: 'xKevIsDev/bolt-react-native-template',
+    tags: ['mobile', 'react-native', 'mobile-app', 'android', 'iphone'],
+    icon: 'i-bolt:react-native',
+  },
   {
     name: 'Basic Astro',
     label: 'Astro Basic',

docs/docs/index.md

@@ -43,6 +43,7 @@ Also [this pinned post in our community](https://thinktank.ottomator.ai/t/videos
 - **Integration-ready Docker support** for a hassle-free setup.
 - **One-click deployment** to **Netlify**, **Vercel**, or **Cloudflare Pages**.
 - **Import Figma designs** to bootstrap your UI code.
+ - **Mobile starter templates** for React Native and Expo with [QR-code preview using Expo Go](mobile-preview.md).
 
 ---
 

docs/docs/mobile-preview.md

@@ -0,0 +1,12 @@
+# Mobile Preview with Expo
+
+bolt.diy ships with starter templates for building mobile apps using **React Native** and **Expo**. These templates can be selected from the starter template picker. After cloning a template, navigate to the `mobile` directory and start the Expo development server:
+
+```bash
+pnpm install
+pnpm start
+```
+
+The Expo CLI displays a QR code in the terminal and in the browser-based dev tools. Scan this code using the **Expo Go** app on your iOS or Android device to preview the application instantly.
+
+You can also run `pnpm android` or `pnpm ios` to launch an emulator if you have one configured.

icons/react-native.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'><path fill='#7B7B7B' d='M26.573 13.944c0-1.628-2.039-3.17-5.164-4.127.721-3.186.4-5.72-1.012-6.532a2.196 2.196 0 0 0-1.122-.28v1.117c.23 0 .416.045.571.13.681.39.977 1.878.746 3.792-.055.47-.145.966-.255 1.472a24.273 24.273 0 0 0-3.18-.546 24.425 24.425 0 0 0-2.084-2.504c1.633-1.518 3.165-2.349 4.207-2.349V3c-1.377 0-3.18.982-5.004 2.685C12.453 3.992 10.65 3.02 9.273 3.02v1.117c1.036 0 2.574.826 4.207 2.334a23.639 23.639 0 0 0-2.069 2.5c-1.132.12-2.203.305-3.185.55-.115-.5-.2-.986-.26-1.452-.236-1.914.054-3.401.73-3.797.15-.09.346-.13.577-.13V3.025c-.421 0-.802.09-1.132.28-1.408.812-1.723 3.341-.997 6.517C4.029 10.784 2 12.322 2 13.944c0 1.628 2.039 3.17 5.164 4.127-.721 3.186-.4 5.72 1.012 6.532.325.19.706.28 1.127.28 1.377 0 3.18-.982 5.003-2.685 1.824 1.693 3.627 2.665 5.004 2.665.42 0 .802-.09 1.132-.28 1.407-.812 1.723-3.341.997-6.517 3.105-.956 5.134-2.5 5.134-4.122Zm-6.522-3.34a22.533 22.533 0 0 1-.676 1.978 27.086 27.086 0 0 0-1.377-2.374c.711.105 1.397.235 2.053.395Zm-2.294 5.334a26.71 26.71 0 0 1-1.207 1.913 26.066 26.066 0 0 1-4.518.005 26.128 26.128 0 0 1-2.254-3.897 26.685 26.685 0 0 1 2.244-3.912 26.051 26.051 0 0 1 4.518-.005 26.117 26.117 0 0 1 2.254 3.897 28.091 28.091 0 0 1-1.037 1.998Zm1.618-.652c.27.672.501 1.343.691 1.994-.656.16-1.347.295-2.063.4a27.72 27.72 0 0 0 1.372-2.394Zm-5.079 5.345a20.648 20.648 0 0 1-1.392-1.603c.45.02.912.035 1.377.035.471 0 .937-.01 1.393-.035-.451.586-.917 1.122-1.378 1.603Zm-3.726-2.95a22.6 22.6 0 0 1-2.054-.396c.186-.646.416-1.312.677-1.979.205.401.42.802.656 1.203.235.4.476.79.72 1.172ZM14.27 7.257c.466.481.932 1.017 1.393 1.603-.451-.02-.912-.035-1.378-.035-.47 0-.936.01-1.392.035.45-.586.916-1.122 1.377-1.603Zm-3.706 2.95a27.624 27.624 0 0 0-1.372 2.39c-.271-.671-.501-1.343-.692-1.994a24.32 24.32 0 0 1 2.064-.395Zm-4.533 6.271c-1.773-.756-2.92-1.748-2.92-2.534 0-.786 1.147-1.783 2.92-2.534.43-.186.902-.351 1.387-.506.286.982.662 2.003 1.127 3.05a23.715 23.715 0 0 0-1.112 3.035 15.23 15.23 0 0 1-1.402-.51Zm2.695 7.158c-.681-.39-.977-1.878-.747-3.792.055-.47.146-.966.256-1.472.982.24 2.053.425 3.18.546a24.43 24.43 0 0 0 2.084 2.504c-1.633 1.518-3.165 2.35-4.207 2.35a1.195 1.195 0 0 1-.566-.136Zm11.88-3.817c.236 1.914-.055 3.401-.73 3.797-.151.09-.346.13-.577.13-1.037 0-2.574-.826-4.207-2.334a23.668 23.668 0 0 0 2.068-2.5 23.393 23.393 0 0 0 3.186-.55c.115.506.205.992.26 1.457Zm1.929-3.34c-.431.185-.902.35-1.388.505a24.059 24.059 0 0 0-1.127-3.05c.461-1.042.832-2.058 1.112-3.035.496.155.967.325 1.408.51 1.773.757 2.92 1.749 2.92 2.535-.005.786-1.152 1.783-2.925 2.534Z'/><path fill='#7B7B7B' d='M14.281 16.236a2.289 2.289 0 1 0 0-4.578 2.289 2.289 0 0 0 0 4.578Z'/></svg>

mobile/App.tsx

@@ -0,0 +1,21 @@
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Welcome to the Bolt Expo template!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

mobile/app.json

@@ -0,0 +1,7 @@
+{
+  "expo": {
+    "name": "Bolt Mobile",
+    "slug": "bolt-mobile",
+    "version": "1.0.0"
+  }
+}

mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo']
+  };
+};

mobile/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "bolt-mobile",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "^53.0.10",
+    "expo-status-bar": "~1.9.0",
+    "react": "18.2.0",
+    "react-native": "0.73.0"
+  }
+}

mobile/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}