Build Mobile Apps with Expo in Bolt.new 📱

Important Prerequisites

Before starting your mobile app development journey, you’ll need:

Expo Account: Required for building and deploying apps. Create a free account here.
Apple Developer Account: Required for iOS development and App Store publishing. Create an account here. Note: If publishing as a business, you’ll need a DUNS number - Apple will help you obtain one for free as part of their registration fees.
Google Play Developer Account: Required for Android app publishing. Sign up here. A one-time registration fee applies.

Official Bolt EAS Guide ⚡ Build & Deploy Mobile Apps

Expo makes mobile app development accessible and efficient. Let’s explore how to use Expo within Bolt.new to create cross-platform mobile applications.

Expo Application Services (EAS)

EAS is a powerful suite of cloud services that simplifies the build and deployment process for Expo apps.

Setting Up EAS

Install EAS CLI
```
npm install -g eas-cli
```
Login to Your Expo Account
```
eas login
```
Configure Your Project
```
eas build:configure
```

Building Your App

For iOS TestFlight
```
eas build --platform ios
```
For Android Play Store
```
eas build --platform android
```
For Web Deployment
```
eas build:web
```

Getting Started with Expo

Prerequisites

Basic understanding of React
Expo Go app installed on your mobile device
Bolt.new account

Initial Setup

Create a New Project

npx create-expo-app@latest my-app --template blank-typescript

Essential Dependencies

{
  "dependencies": {
    "expo": "~50.0.0",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.2"
  }
}

Project Structure

my-app/
├── App.tsx           # Main application component
├── assets/          # Images, fonts, and other static files
├── components/      # Reusable React components
├── screens/         # Individual app screens
└── app.json         # Expo configuration

Basic App Example

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Welcome to my Expo app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

.showcase-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: white;
  background: rgb(var(--accent));
  text-decoration: none;
  font-weight: 500;
  padding: 0.8rem;
  border-radius: 0.5rem;
  transition: opacity 0.2s;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 1rem 0 2rem;
  width: fit-content; 
}

.showcase-button:hover {
  opacity: 0.9;
}

.bolt-line {
  font-weight: bold;
}

Key Features in Bolt.new

1. Live Preview

Use Expo Go app to scan QR code
See changes in real-time on your device
Debug directly in Bolt.new

2. Development Tools

Built-in TypeScript support
Hot module replacement
Integrated debugging

3. Asset Management

import { Image } from 'react-native';
import logo from './assets/logo.png';

function Logo() {
  return <Image source={logo} style={{ width: 100, height: 100 }} />;
}

Common Components

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. Forms

import { TextInput, Button, View } from 'react-native';

function LoginForm() {
  return (
    <View>
      <TextInput 
        placeholder="Email"
        keyboardType="email-address"
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
      />
      <Button title="Login" onPress={() => {}} />
    </View>
  );
}

3. Lists

import { FlatList, Text } from 'react-native';

function ItemList() {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
  ];

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
}

Best Practices

Performance
- Use memo for component optimization
- Implement list virtualization
- Optimize image assets

Styling

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  text: {
    fontSize: 16,
    color: '#333',
  },
});

Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  header: {
    paddingTop: Platform.OS === 'ios' ? 40 : 20,
    // Other styles...
  },
});

Testing Your App

Development Mode
- Use Expo Go app
- Connect through QR code
- Enable hot reloading

Production Build

expo build:android  # For Android
expo build:ios      # For iOS

Common Issues and Solutions

1. Metro Bundler

If the bundler isn’t starting:

expo start --clear

2. Dependencies

When adding new native dependencies:

expo install package-name

3. Asset Loading

For image loading issues:

import { Asset } from 'expo-asset';

async function cacheImages() {
  await Asset.loadAsync([require('./assets/image.png')]);
}

Deployment

Build Configuration

{
  "expo": {
    "name": "Your App Name",
    "version": "1.0.0",
    "platforms": ["ios", "android"],
    "orientation": "portrait"
  }
}

Publishing
```
expo publish
```

Resources

Remember

Keep your Expo SDK version updated
Test on both iOS and Android
Use TypeScript for better development experience
Leverage Expo’s pre-built components

Need more advanced support? Check out our Advanced Support options!