Expo Rn

Expo Router Patterns

Root Layout

// app/_layout.tsx
export default function RootLayout() {
  const [fontsLoaded] = useFonts({ ... });

  useEffect(() => {
    if (fontsLoaded) SplashScreen.hideAsync();
  }, [fontsLoaded]);

  if (!fontsLoaded) return null;

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack screenOptions={{ headerShown: false }} />
    </GestureHandlerRootView>
  );
}

Tab Layout

// app/(tabs)/_layout.tsx
export default function TabLayout() {
  return (
    <Tabs screenOptions={{
      tabBarActiveTintColor: Colors.primary,
      headerShown: false,
    }}>
      <Tabs.Screen name="index" options={{
        title: 'Home',
        tabBarIcon: ({ color }) => <IconSymbol name="house" color={color} />,
      }} />
    </Tabs>
  );
}

Typed Navigation

import { useRouter, useLocalSearchParams } from 'expo-router';

const router = useRouter();
router.push('/profile/123');
router.back();
router.replace('/(tabs)');

const { id } = useLocalSearchParams<{ id: string }>();

Supabase Integration

Client Setup

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';
import * as SecureStore from 'expo-secure-store';
import { Database } from '@/types/database';

const ExpoSecureStoreAdapter = {
  getItem: (key: string) => SecureStore.getItemAsync(key),
  setItem: (key: string, value: string) => SecureStore.setItemAsync(key, value),
  removeItem: (key: string) => SecureStore.deleteItemAsync(key),
};

import { env } from '@/lib/env';

export const supabase = createClient<Database>(
  env.SUPABASE_URL!,
  env.SUPABASE_ANON_KEY!,
  { auth: { storage: ExpoSecureStoreAdapter, autoRefreshToken: true } }
);

Auth Pattern

// hooks/useAuth.ts
export function useAuth() {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    supabase.auth.getUser().then(({ data }) => setUser(data.user));
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_, session) => setUser(session?.user ?? null)
    );
    return () => subscription.unsubscribe();
  }, []);

  return { user, signIn, signOut };
}

Data Fetching with React Query

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function useItems() {
  return useQuery({
    queryKey: ['items'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('items')
        .select('*')
        .order('created_at', { ascending: false });
      if (error) throw error;
      return data;
    },
  });
}

EAS Configuration

eas.json

{
  "cli": { "version": ">= 13.0.0" },
  "build": {
    "development": { "developmentClient": true, "distribution": "internal" },
    "preview": { "distribution": "internal" },
    "production": {}
  },
  "submit": {
    "production": {
      "ios": { "ascAppId": "APP_ID", "appleTeamId": "TEAM_ID" },
      "android": { "serviceAccountKeyPath": "./google-service-account.json" }
    }
  }
}

Build Commands

eas build --platform ios --profile development   # Dev client
eas build --platform ios --profile production     # Store build
eas update --branch production --message "fix"    # OTA update

Component Architecture

Base Component Pattern

interface Props {
  // Explicit, typed props
}

export function Component({ ...props }: Props) {
  // 1. Hooks (state, refs, animation values)
  // 2. Derived values
  // 3. Handlers
  // 4. Render
  return ( ... );
}

const styles = StyleSheet.create({ ... });

Rules:

• One component per file
• Max 200 lines per file — split if longer
• Export named functions (not default export)
• Props interface always defined and exported
• StyleSheet.create at bottom of file
• No inline styles except animated styles

Answer in Korean.