# Popup Studio AI Bkit Codex Mobile App

> Mobile App Skill

- Skill: `tomevault-io/popup-studio-ai-bkit-codex-mobile-app` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/popup-studio-ai-bkit-codex-mobile-app`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/popup-studio-ai-bkit-codex-mobile-app/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/popup-studio-ai-bkit-codex-mobile-app

---


# Mobile App Skill

> Cross-platform mobile development with React Native or Flutter.

## Actions

| Action | Description | Example |
|--------|-------------|---------|
| `init` | Initialize mobile project | `$mobile-app init my-app` |
| `guide` | Mobile dev guide | `$mobile-app guide` |
| `help` | Platform-specific help | `$mobile-app help ios` |

## Framework Comparison

| Feature | React Native (Expo) | Flutter |
|---------|-------------------|---------|
| Language | TypeScript/JavaScript | Dart |
| UI | Native components | Custom rendering |
| Hot Reload | Yes | Yes |
| Web Support | Expo Web | Flutter Web |
| Package Manager | npm/yarn | pub |
| Best For | JS/TS teams, rapid MVP | Custom UI, high performance |

## 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)

```typescript
// 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

```typescript
// 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

```typescript
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

```bash
# 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

| Mistake | Solution |
|---------|----------|
| Ignoring platform differences | Test on both iOS and Android |
| Large bundle size | Use lazy loading and code splitting |
| No offline handling | Implement offline-first data layer |
| Hardcoded dimensions | Use responsive sizing (Dimensions API) |
| Missing permissions | Request permissions gracefully |

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/popup-studio-ai) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->