React Native AI Chat App
Build a high-quality React Native + Expo application for chatting with multiple AI models (Ollama, OpenAI, Anthropic). This skill enforces clean TypeScript patterns, Jotai state management, Nativewind styling, and mobile performance best practices.
Instructions
Project Context
You are building an open-source multi-AI chat client using React Native and Expo. The app supports Ollama, OpenAI, and Anthropic models and prioritizes performance, modularity, and type safety.
Code Style & Structure
1. Write concise, type-safe TypeScript for all components and logic
2. Use functional components and React hooks exclusively (no class components)
3. Keep components modular, reusable, and maintainable (max 200 lines per component)
4. Organize files by feature: group related components, hooks, and styles together
5. Use lowercase hyphenated directory names (e.g., `chat-screen`, `user-profile`)
Naming Conventions
**Variables & functions**: camelCase (`isFetchingData`, `handleUserInput`)**Components**: PascalCase (`UserProfile`, `ChatScreen`)**Directories**: lowercase-hyphenated (`user-profile`, `chat-screen`)TypeScript Rules
Enable strict mode in `tsconfig.json`Define props and state with TypeScript interfaces (avoid `any`)Use `React.FC<Props>` for functional components with typed propsPrefer explicit return types for functions when clarity is neededState Management
Use **Jotai** for global state (find atoms in `atoms.ts`)Minimize `useState` and `useEffect` inside componentsAvoid heavy computations or side effects in render methodsPerformance Optimization
Optimize `FlatList` with: `removeClippedSubviews`, `maxToRenderPerBatch`, `windowSize`Use `getItemLayout` when list items have consistent sizeAvoid inline anonymous functions in `renderItem` or event handlers (define functions outside JSX to prevent re-renders)Use `React.memo` for expensive componentsOptimize images with `react-native-fast-image` or similarUI & Styling
Use **Nativewind** for styling (Tailwind-like classes: `bg-surface`, `text-primary`)Ensure responsive design for different screen sizes and orientationsKeep styles consistent across componentsUse semantic class names from your design systemNavigation
Use **React Navigation** for screen transitions and deep linkingFollow best practices for stack, tab, and drawer navigatorsHandle deep links properly for external intentsBuild & Deployment
Use **EAS Build** and **EAS Update** for continuous deployment and OTA updatesTest on both iOS and Android simulators before shippingFollow Expo's recommended build workflowsBest Practices
Follow React Native's threading model (keep UI thread responsive)Separate business logic from UI components (use custom hooks)Write small, testable functionsComment only where logic is non-obvious (prefer self-documenting code)Avoid over-abstraction: don't create helpers/utilities for one-time operationsExample Usage
**User:** "Create a chat screen with message bubbles and an input field."
**Assistant:**
1. Creates `ChatScreen.tsx` in `screens/chat-screen/`
2. Uses Jotai atoms for chat state
3. Implements optimized `FlatList` with `getItemLayout`
4. Styles with Nativewind classes
5. Keeps component under 200 lines, extracting sub-components if needed
**User:** "Add support for streaming responses from OpenAI."
**Assistant:**
1. Creates a custom hook `useStreamingChat` in `hooks/`
2. Updates Jotai atoms to handle partial messages
3. Ensures UI updates smoothly without blocking the thread
4. Adds TypeScript types for streaming events
Constraints
Components must be ≤200 linesNo `any` types (use `unknown` or proper types)No class components (functional only)Use Jotai for state, not `useState` for global concernsAlways test on both iOS and Android