A modern, cross-platform React Native chat application template with Material Design and AI model integration. Built with Expo Router, TypeScript, and a beautiful Material Design system.
- ChatGPT-like UI with beautiful message bubbles
- Material Design with custom color palette
- Dark/Light mode support with automatic switching
- Smooth animations and transitions
- Typing indicators for realistic chat experience
- Dynamic input field with "Ask anything..." placeholder
- Image attachment button (round button on the left)
- Smart send/microphone button that changes based on input state
- Voice recording ready (microphone icon when empty)
- Send button with primary blue color when typing
- Model selector in top panel with dropdown menu
- Multiple AI models support:
- Llama (Meta)
- GPT-4 (OpenAI)
- GPT-4o (OpenAI)
- Claude (Anthropic)
- Gemini (Google)
- Easy model switching with visual feedback
- Burger menu ready for left drawer implementation
- Top panel with model selection
- Clean, focused design without bottom navigation
- Responsive layout for all screen sizes
Primary: #078DEE (Blue)
Secondary: #8E33FF (Purple)
Success: #22C55E (Green)
Warning: #FFAB00 (Orange)
Error: #FF5630 (Red)- Typography scale with proper font weights
- Spacing system based on 8px grid
- Border radius with Material Design values
- Elevation system with web-safe shadows
- Theme-aware colors for light/dark modes
Screenshots coming soon
- React Native - Cross-platform mobile development
- Expo Router - File-based routing and navigation
- TypeScript - Type-safe development
- Material Design - Modern UI/UX principles
- Platform Icons - Native SF Symbols (iOS) and Material Icons (Android)
- Expo - Development platform and tools
- Node.js (v18 or higher)
- npm or yarn package manager
- Expo CLI -
npm install -g @expo/cli
-
Clone the repository
git clone https://github.com/your-username/react-native-llm-chat-template.git cd react-native-llm-chat-template -
Install dependencies
npm install
-
Start the development server
npm start
-
Run on your preferred platform
- iOS Simulator: Press
ior runnpm run ios - Android Emulator: Press
aor runnpm run android - Web Browser: Press
wor runnpm run web - Physical Device: Scan QR code with Expo Go app
- iOS Simulator: Press
react-native-llm-chat-template/
├── app/ # Expo Router pages
│ ├── index.tsx # Main chat interface
│ └── _layout.tsx # Root layout configuration
├── src/ # Source code
│ ├── components/ # Reusable UI components
│ │ ├── ChatMessage.tsx # Message bubble component
│ │ ├── TypingIndicator.tsx # Typing animation
│ │ └── IconSymbol.tsx # Platform-specific icon component
│ ├── constants/ # App constants
│ │ └── theme.ts # Material Design theme system
│ ├── hooks/ # Custom React hooks
│ │ └── useTheme.ts # Theme management hook
│ └── types/ # TypeScript type definitions
│ └── chat.ts # Chat-related types
├── assets/ # Static assets
├── app.json # Expo configuration
├── package.json # Dependencies and scripts
└── README.md # This file
- Main chat screen with message list
- Smart input system with dynamic buttons
- Model selector in top panel
- Ready for AI service integration
- Complete Material Design implementation
- Light and dark theme support
- Custom color palette
- Typography, spacing, and elevation systems
- ChatMessage: Beautiful message bubbles with timestamps
- TypingIndicator: Animated typing dots
- IconSymbol: Platform-specific icons (SF Symbols for iOS, Material Icons for Android)
const models = [
{ id: 'your-model', name: 'Your Model', description: 'Model description' },
// Add more models here
];Edit src/constants/theme.ts to modify the color palette:
export const palette = {
primary: {
main: '#YOUR_COLOR',
// ... other shades
},
// ... other colors
};- Image picker: Implement in the image button
- Voice recording: Add to microphone button
- AI integration: Connect to your preferred AI service
- Left drawer: Implement using the burger menu
# Start development server
npm start
# Run on specific platforms
npm run ios # iOS Simulator
npm run android # Android Emulator
npm run web # Web Browser
# Build for production
npm run build
# Lint code
npm run lint- ✅ iOS - Full support with native performance
- ✅ Android - Full support with Material Design
- ✅ Web - Responsive web interface
- ✅ Expo Go - Development and testing
- Left drawer navigation with settings and history
- Image picker integration for photo sharing
- Voice recording with speech-to-text
- Real AI service integration (OpenAI, Anthropic, etc.)
- Message history and conversation management
- User authentication and profiles
- Push notifications for new messages
- Offline support with local storage
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the custom license - see the LICENSE file for details.
- Built with React Native and Expo
- Material Design principles and guidelines
- Solar Icons for beautiful iconography
- Community contributions welcome
- Documentation: Check the code comments and this README
- Issues: Open an issue on GitHub for bugs or feature requests
- Discussions: Use GitHub Discussions for questions and ideas
Ready to build your next AI chat app? This template provides everything you need to get started quickly! 🚀