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

  1. Install EAS CLI

    npm install -g eas-cli
  2. Login to Your Expo Account

    eas login
  3. Configure Your Project

    eas build:configure

Building Your App

  1. For iOS TestFlight

    eas build --platform ios
  2. For Android Play Store

    eas build --platform android
  3. 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

  1. Create a New Project

    npx create-expo-app@latest my-app --template blank-typescript
  2. 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

1. Navigation

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

  1. Performance

    • Use memo for component optimization
    • Implement list virtualization
    • Optimize image assets
  2. Styling

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

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

Testing Your App

  1. Development Mode

    • Use Expo Go app
    • Connect through QR code
    • Enable hot reloading
  2. 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

  1. Build Configuration

    {
      "expo": {
        "name": "Your App Name",
        "version": "1.0.0",
        "platforms": ["ios", "android"],
        "orientation": "portrait"
      }
    }
  2. 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!