React Native iMessage

A high-fidelity iMessage clone built with React Native, Expo SDK 54, and the New Architecture (Fabric). Features smooth animations, optimistic updates, dark/light theme support, and simulated NPC responses.

📱 Preview

✨ Features

• 💬 iMessage-style UI - Authentic Apple iMessage design and animations
• 🚀 High Performance - Built with React Native New Architecture (Fabric)
• 🎨 Smooth Animations - Spring-based entrance animations for messages
• 🌓 Dark/Light Theme - Full support for system theme preferences
• 💭 Typing Indicator - Animated three-dot typing indicator
• 🤖 Simulated NPC Responses - Automatic replies after sending messages
• 📱 Optimistic Updates - Instant message feedback with TanStack Query
• ♾️ Infinite Scroll - Pagination for loading message history
• 🎯 Type Safe - Full TypeScript support throughout

🏗️ Tech Stack

• Framework: Expo SDK 54 with React Native 0.81
• Architecture: React Native New Architecture (Fabric) enabled
• State Management: TanStack Query v5 for server state
• Routing: Expo Router v6
• Language: TypeScript
• Package Manager: pnpm

📦 Installation

Prerequisites

• Node.js 18 or higher
• pnpm (or npm/yarn)
• iOS Simulator (Xcode) or Android Emulator

Setup

# Clone the repository
git clone https://github.com/temporarystudios/react-native-imessage.git
cd react-native-imessage

# Install dependencies
pnpm install

# Start the development server
pnpm start

🚀 Running the App

# Start Expo development server
pnpm start

# Run on iOS
pnpm ios

# Run on Android
pnpm android

# Run on Web
pnpm web

📁 Project Structure

rn-imessage/
├── app/                          # App screens (Expo Router)
│   ├── _layout.tsx              # Root layout with QueryClientProvider
│   └── (tabs)/
│       └── index.tsx            # Main chat screen
├── components/                   # Reusable components
│   └── typing-indicator.tsx     # Animated typing indicator
├── lib/                         # Business logic
│   ├── api/
│   │   └── messages.ts          # Mock API functions
│   └── hooks/
│       └── useMessages.ts       # React Query hooks
├── modules/                     # Native modules
│   └── expo-chat-message-list/  # Custom native message list
├── assets/                      # Static assets
└── constants/                   # App constants

🎯 Key Components

ChatScreen (app/(tabs)/index.tsx)

The main chat interface featuring:

• iMessage-style header with avatar
• Message list with custom bubbles
• Animated message entrance
• Input bar with send button
• Typing indicator integration
• NPC auto-response simulation
• Dark/light theme support

TypingIndicator (components/typing-indicator.tsx)

Reusable component showing animated typing status:

• Three bouncing dots with staggered animation
• Proper cleanup on unmount
• Self-contained styling
• Theme-aware colors

Message Hooks (lib/hooks/useMessages.ts)

Custom React Query hooks:

• useMessages() - Infinite query for paginated message history
• useSendMessage() - Mutation with optimistic updates

🎨 Design Specifications

Message Bubbles

Light Mode:

• User messages: Blue (#007AFF), right-aligned, white text
• Other messages: Light gray (#E9E9EB), left-aligned, black text

Dark Mode:

• User messages: Blue (#0A84FF), right-aligned, white text
• Other messages: Dark gray (#3A3A3C), left-aligned, white text

Layout:

• Border radius: 20pt for smooth rounded corners
• Max width: 70% of screen width
• Font: 17pt with -0.2 letter spacing

Color Palette

Light Mode

Background:          #F7F7F7
Header:              #FFFFFF
User Bubble:         #007AFF
Other Bubble:        #E9E9EB
Input Background:    #FFFFFF
Input Border:        #D1D1D6
Text (Primary):      #000000
Text (Secondary):    #8E8E93

Dark Mode

Background:          #000000
Header:              #1C1C1E
User Bubble:         #0A84FF
Other Bubble:        #3A3A3C
Input Background:    #1C1C1E
Input Border:        #38383A
Text (Primary):      #FFFFFF
Text (Secondary):    #8E8E93

Animations

• Message entrance: Spring animation (tension: 180, friction: 12)
• Send button: Scale animation (0.88 on press)
• Typing dots: Vertical bounce (-8px, 400ms duration, 150ms delay between dots)

🔧 Configuration

New Architecture

The project uses React Native's New Architecture (Fabric):

// app.json
{
  "expo": {
    "newArchEnabled": true,
    "userInterfaceStyle": "automatic"
  }
}

React Compiler (Experimental)

React 19 compiler is enabled for automatic memoization:

{
  "experiments": {
    "reactCompiler": true
  }
}

🌓 Theme Support

The app automatically adapts to system theme preferences. Themes can be toggled in:

• iOS: Settings → Display & Brightness
• Android: Settings → Display → Dark theme

Colors dynamically update using useColorScheme() hook.

🤖 NPC Response System

After sending a message, the app simulates a response:

1. Wait 1 second
2. Show typing indicator for 2 seconds
3. Display random NPC response from predefined phrases:
   • "That's interesting!"
   • "Tell me more"
   • "I see what you mean"
   • "Absolutely!"
   • "That makes sense"
   • "I was thinking the same thing"
   • "Good point!"
   • "Interesting perspective"

📝 Scripts

# Development
pnpm start              # Start Expo dev server
pnpm ios                # Run on iOS
pnpm android            # Run on Android
pnpm web                # Run on web

# Code Quality
pnpm lint               # Run ESLint
npx tsc --noEmit        # Type check

# Project
pnpm reset-project      # Reset to fresh project

🧪 Mock Data

The app includes mock conversation data (lib/api/messages.ts) with:

• Initial 13-message conversation between "Jannis" and user
• Pagination support (20 messages per page)
• Simulated network delays (500-800ms)
• Auto-generated older messages for testing

🎯 Performance Optimizations

• ✅ Native component for message rendering
• ✅ Optimistic updates for instant feedback
• ✅ Proper animation cleanup to prevent memory leaks
• ✅ Memoized components with React Compiler
• ✅ Efficient query cache management
• ✅ Self-sizing message bubbles
• ✅ NPC responses moved outside render cycle

🔮 Future Enhancements

• Real backend integration
• Image/media attachments
• Message timestamps
• Read receipts
• Group chat support
• Push notifications
• Voice messages
• Message reactions
• Search functionality
• Message editing/deletion

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Contact

For questions or feedback, please open an issue on GitHub.

👨‍💻 Author

temporarystudios

• GitHub: @temporarystudios

---

Built with ❤️ using Expo and React Native