Popup Studio AI Bkit Codex Mobile App

Mobile App Skill

Cross-platform mobile development with React Native or Flutter.

Actions

Framework Comparison

Recommended: Expo (React Native)

For bkit-codex users, Expo is recommended because:

• Shares skills with web development (TypeScript, React)
• Integrates with bkend.ai BaaS
• Faster development cycle
• No native build setup needed initially

Project Structure (Expo)

mobile-app/
├── app/                       # Expo Router (file-based routing)
│   ├── (tabs)/               # Tab navigation
│   │   ├── index.tsx         # Home tab
│   │   ├── explore.tsx       # Explore tab
│   │   └── profile.tsx       # Profile tab
│   ├── (auth)/               # Auth screens
│   │   ├── login.tsx
│   │   └── register.tsx
│   ├── _layout.tsx           # Root layout
│   └── +not-found.tsx        # 404 screen
├── components/                # Reusable components
│   ├── ui/                   # Basic UI components
│   └── features/             # Feature components
├── hooks/                     # Custom hooks
│   ├── useAuth.ts
│   └── useColorScheme.ts
├── lib/                       # Utilities
│   ├── api-client.ts         # API client
│   └── storage.ts            # AsyncStorage wrapper
├── stores/                    # State management
│   └── auth-store.ts
├── constants/                 # App constants
│   ├── Colors.ts
│   └── Layout.ts
├── assets/                    # Images, fonts
├── app.json                   # Expo config
├── package.json
└── tsconfig.json

Core Patterns

Navigation (Expo Router)

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="(auth)" options={{ headerShown: false }} />
    </Stack>
  );
}

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Home, Search, User } from 'lucide-react-native';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({color}) => <Home color={color} /> }} />
      <Tabs.Screen name="explore" options={{ title: 'Explore', tabBarIcon: ({color}) => <Search color={color} /> }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile', tabBarIcon: ({color}) => <User color={color} /> }} />
    </Tabs>
  );
}

Secure Storage

// lib/storage.ts
import * as SecureStore from 'expo-secure-store';

export const storage = {
  async getToken(): Promise<string | null> {
    return SecureStore.getItemAsync('access_token');
  },
  async setToken(token: string): Promise<void> {
    await SecureStore.setItemAsync('access_token', token);
  },
  async removeToken(): Promise<void> {
    await SecureStore.deleteItemAsync('access_token');
  },
};

Platform-Specific Code

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 50 : 30,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 } },
      android: { elevation: 4 },
    }),
  },
});

Pipeline Integration

Mobile apps follow the same 9-phase pipeline with mobile-specific considerations:

• Phase 3: Include mobile wireframes (320px, 375px, 414px widths)
• Phase 5: Use React Native component patterns
• Phase 6: Handle offline state and connectivity
• Phase 9: App Store / Play Store submission

Build & Distribution

# Development
npx expo start

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

# Submit to stores
eas submit --platform ios
eas submit --platform android

Common Mistakes

Converted and distributed by TomeVault — claim your Tome and manage your conversions.