mobile-expo

Mobile Platform: React Native + Expo

The default mobile stack. React Native + Expo + Supabase + EAS Build.

Project Structure

Explain to the designer as:

"Your app is organized into folders. Think of each folder as a room with a specific purpose."

app/                      ← Screens (each file = a screen in your app)
  (tabs)/                 ← Tab bar screens
    index.tsx             ← First tab (Home)
    explore.tsx           ← Second tab
    _layout.tsx           ← Tab bar configuration
  _layout.tsx             ← Root layout (wraps everything)
  +not-found.tsx          ← Screen shown when navigating to missing route
components/               ← Reusable pieces (buttons, cards, headers)
constants/                ← Colors, sizes, config values
hooks/                    ← Shared logic
utils/
  supabase.ts             ← Database connection
assets/
  images/                 ← App images
  fonts/                  ← Custom fonts
app.json                  ← App name, icon, splash screen, permissions
.env                      ← Secret settings (database keys)

Key Conventions

No HTML — Use React Native Components

Mobile apps don't use HTML. Map web concepts to mobile:

Web (HTML)	Mobile (React Native)	Notes
<div>	<View>	Container — like a box
<p>, <span>	<Text>	All text MUST be in <Text>
<img>	<Image>	Images
<button>	<Pressable>	Tappable areas
<input>	<TextInput>	Text fields
<ul> + <li>	<FlatList>	Scrollable lists
<a>	<Link> (from expo-router)	Navigation
CSS classes	StyleSheet or inline styles	No Tailwind by default

Styling

No Tailwind in mobile. Use StyleSheet:

import { StyleSheet, View, Text } from 'react-native'

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 32,
    fontWeight: '700',
    color: '#111',
  },
})