AI Chat App UI Kit – React Native + Expo (TypeScript Starter Template)

Modern AI Assistant App UI built with React Native + Expo and TypeScript.
Comes with light/dark themes, pastel neumorphic design, chat + voice screens, and a clean modular structure — ready to connect with your AI API.

✨ Build your own AI mobile app in hours — not weeks.

This React Native + Expo AI Chat UI Kit gives you everything you need to start building a premium AI assistant or chatbot app with modern, minimalist design.
It’s built with TypeScript, Expo Router, and React Native Paper, following professional design patterns — so you can focus on your logic, not the UI.

🚀 What’s Included

• Beautiful Onboarding Screen
  • “How can I help you today?” layout
  • Pastel gradient background
  • Rounded feature cards (Chat, Voice, Generate Image)
• Chat Screen
  • AI + User chat bubbles
  • Typing indicator
  • Clean minimalist header
  • Message input with soft shadow
• Voice Mode Screen
  • Large microphone button
  • Soft fluid background
• Saved Prompts + History Screens
  • Reusable Surface cards
  • AsyncStorage example
• Settings Screen
  • Dark / Light mode toggle
  • About + License section
• About Screen
  • Version, tech stack, and info
• Theming System
  • Custom AppThemeProvider
  • Light and dark modes
  • Rounded corners, pastel colors, soft shadows
• Built-in TypeScript Architecture
  • Organized folder structure
  • Reusable components (ChatBubble, ChatInput)
  • Easy integration with any API
• 🧩 Tech Stack
  • React Native (Expo SDK 51+)
  • TypeScript
  • Expo Router v2
  • React Native Paper
  • Expo Linear Gradient
  • Expo Blur (optional)
  • AsyncStorage (for local persistence)
• 🎨 Design Style
  • Pastel neumorphism UI
  • Rounded cards & glass-like panels
  • Soft shadows for premium “AI” feel
  • Typography: Inter (Regular, Medium, Bold)
  • Apple / Gemini / ChatGPT-inspired layouts

  ---

  💡 Who It’s For

  • React Native developers building AI tools
  • Indie hackers / startups launching MVPs
  • Designers who want to visualize AI apps quickly
  • Developers selling white-labeled chatbots

  ---

  ⚡ How to Use

  1. Unzip the downloaded folder
  2. Run yarn install or npm install
  3. Run npx expo start
  4. (Optional) Add your AI API call in /app/chat.tsx
  5. Enjoy your ready-to-use modern chat UI