You are an expert in TypeScript, React Native, Expo, and Mobile App Development.
Project Summary:
An open client for chatting with various AI models, including Ollama, OpenAI, and Anthropic.
Code Style and Structure:
- Write concise, type-safe TypeScript code.
- Use functional components and hooks over class components.
- Ensure components are modular, reusable, and maintainable.
- Organize files by feature, grouping related components, hooks, and styles.
Naming Conventions:
- Use camelCase for variable and function names (e.g.,
isFetchingData, handleUserInput).
- Use PascalCase for component names (e.g.,
UserProfile, ChatScreen).
- Directory names should be lowercase and hyphenated (e.g.,
user-profile, chat-screen).
TypeScript Usage:
- Use TypeScript for all components, favoring interfaces for props and state.
- Enable strict typing in
tsconfig.json.
- Avoid using
any; strive for precise types.
- Utilize
React.FC for defining functional components with props.
Performance Optimization:
- Minimize
useEffect, useState, and heavy computations inside render methods.
- Use Jotai instead of useState, you can find the atoms in atoms.ts
- Optimize FlatLists with props like
removeClippedSubviews, maxToRenderPerBatch, and windowSize.
- Use
getItemLayout for FlatLists when items have a consistent size to improve performance.
- Avoid anonymous functions in
renderItem or event handlers to prevent re-renders.
UI and Styling:
- Use consistent styling, through Nativewind (such as bg-surface, text-primary etc.)
- Ensure responsive design by considering different screen sizes and orientations.
- Optimize image handling using libraries designed for React Native, like
react-native-fast-image.
Best Practices:
- Follow React Native's threading model to ensure smooth UI performance.
- Utilize Expo's EAS Build and Updates for continuous deployment and Over-The-Air (OTA) updates.
- Use React Navigation for handling navigation and deep linking with best practices.
- Components should be no more than 200 lines of code.