React Native Expo AI Chat Assistant
You are an expert in TypeScript, React Native, Expo, and Mobile App Development.
Project Context
This skill is designed for building an open client for chatting with various AI models, including Ollama, OpenAI, and Anthropic. The project emphasizes performance, type safety, and modern React Native best practices.
Code Style and Structure
When working on React Native Expo projects:
Write concise, type-safe TypeScript codeUse functional components and hooks over class componentsEnsure components are modular, reusable, and maintainable (no more than 200 lines per component)Organize files by feature, grouping related components, hooks, and styles togetherFollow React Native's threading model to ensure smooth UI performanceNaming Conventions
Apply these naming standards consistently:
**Variables and functions**: camelCase (e.g., `isFetchingData`, `handleUserInput`)**Components**: PascalCase (e.g., `UserProfile`, `ChatScreen`)**Directories**: lowercase and hyphenated (e.g., `user-profile`, `chat-screen`)TypeScript Usage
Maintain strict type safety:
Use TypeScript for all components, favoring interfaces for props and stateEnable strict typing in `tsconfig.json`Avoid using `any`; strive for precise typesUtilize `React.FC` for defining functional components with propsExample:
```typescript
interface ChatScreenProps {
userId: string;
initialMessage?: string;
}
const ChatScreen: React.FC<ChatScreenProps> = ({ userId, initialMessage }) => {
// Component implementation
};
```
State Management with Jotai
Use Jotai instead of `useState` for state managementFind and utilize atoms defined in `atoms.ts`Minimize `useEffect` and heavy computations inside render methodsExample:
```typescript
import { useAtom } from 'jotai';
import { messageAtom } from './atoms';
const ChatComponent: React.FC = () => {
const [messages, setMessages] = useAtom(messageAtom);
// Component logic
};
```
Performance Optimization
Optimize rendering and list performance:
Optimize FlatLists with props: `removeClippedSubviews`, `maxToRenderPerBatch`, `windowSize`Use `getItemLayout` for FlatLists when items have consistent sizeAvoid anonymous functions in `renderItem` or event handlers to prevent unnecessary re-rendersOptimize image handling with `react-native-fast-image`Example FlatList optimization:
```typescript
<FlatList
data={messages}
renderItem={renderMessage}
removeClippedSubviews={true}
maxToRenderPerBatch={10}
windowSize={5}
getItemLayout={(data, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index,
})}
/>
```
UI and Styling
Create consistent, responsive interfaces:
Use Nativewind for consistent styling (e.g., `bg-surface`, `text-primary`)Ensure responsive design by considering different screen sizes and orientationsTest on multiple devices and screen sizesExample:
```typescript
<View className="bg-surface p-4 rounded-lg">
<Text className="text-primary font-semibold">Chat Message</Text>
</View>
```
Navigation
Use React Navigation for handling navigation and deep linkingFollow React Navigation best practices for type-safe navigationDeployment and Updates
Utilize Expo's EAS Build for building production appsUse EAS Updates for Over-The-Air (OTA) updatesConfigure continuous deployment workflowsAI Model Integration
When integrating with AI providers:
Support multiple AI backends (Ollama, OpenAI, Anthropic)Implement proper error handling for API callsHandle streaming responses appropriatelyManage API keys securelyTesting and Quality
Write unit tests for utility functions and hooksTest components with React Native Testing LibraryEnsure proper error boundaries are in placeHandle loading and error states gracefullyImportant Constraints
Keep components under 200 lines of codeAlways prefer Jotai atoms over local `useState`Never use `any` type in TypeScriptAlways consider performance implications of rendering decisions