diff --git a/README.md b/README.md index cf4f19e6..e0965dc8 100644 --- a/README.md +++ b/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 diff --git a/app/utils/constants.ts b/app/utils/constants.ts index df610404..6b77587a 100644 --- a/app/utils/constants.ts +++ b/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', diff --git a/docs/docs/index.md b/docs/docs/index.md index 590cacbd..ebf67d8f 100644 --- a/docs/docs/index.md +++ b/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). --- diff --git a/docs/docs/mobile-preview.md b/docs/docs/mobile-preview.md new file mode 100644 index 00000000..216a1673 --- /dev/null +++ b/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. diff --git a/icons/react-native.svg b/icons/react-native.svg new file mode 100644 index 00000000..5f84dc7a --- /dev/null +++ b/icons/react-native.svg @@ -0,0 +1 @@ + diff --git a/mobile/App.tsx b/mobile/App.tsx new file mode 100644 index 00000000..08c08441 --- /dev/null +++ b/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 ( + + Welcome to the Bolt Expo template! + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/mobile/app.json b/mobile/app.json new file mode 100644 index 00000000..e6b71975 --- /dev/null +++ b/mobile/app.json @@ -0,0 +1,7 @@ +{ + "expo": { + "name": "Bolt Mobile", + "slug": "bolt-mobile", + "version": "1.0.0" + } +} diff --git a/mobile/babel.config.js b/mobile/babel.config.js new file mode 100644 index 00000000..baac9e50 --- /dev/null +++ b/mobile/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function(api) { + api.cache(true); + return { + presets: ['babel-preset-expo'] + }; +}; diff --git a/mobile/package.json b/mobile/package.json new file mode 100644 index 00000000..f046811a --- /dev/null +++ b/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" + } +} diff --git a/mobile/tsconfig.json b/mobile/tsconfig.json new file mode 100644 index 00000000..b9567f60 --- /dev/null +++ b/mobile/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "expo/tsconfig.base", + "compilerOptions": { + "strict": true + } +}