Build an iMessage Clone with React Native and Expo

Description:

React Native iMessage is a high-fidelity chat interface implementation that replicates Apple’s messaging experience.

It built with React Native, Expo SDK, and Fabric to provide a feature-rich chat application, including message bubbles with proper coloring, typing indicators, and system theme adaptation.

Features

💬 Authentic iMessage design with platform-specific animations
🚀 React Native New Architecture implementation for improved performance
🌓 Complete dark and light theme support using system preferences
💭 Animated typing indicator with three-dot bounce animation
🤖 Simulated NPC responses with configurable delay patterns
♾️ Infinite scroll pagination for message history
🎯 Full TypeScript integration with type-safe components
🔧 React Compiler enabled for automatic memoization
📦 Expo Router v6 for file-based navigation

Preview

How to Use It

1. Clone the repository to your local machine using git.

git clone https://github.com/temporarystudios/react-native-imessage.git

2. Navigate into the newly created project directory.

cd react-native-imessage

3. Install the project dependencies using pnpm.

pnpm install

4. Start the Expo development server.

pnpm start

5. Launch the application on your preferred platform.

To run on an iOS Simulator:

pnpm ios

To run on an Android Emulator:

pnpm android

6. This project is configured to use React Native’s New Architecture (Fabric) by default. The setting is enabled in the app.json file.

{
  "expo": {
    "name": "rn-imessage",
    "slug": "rn-imessage",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "rnimessage",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.anonymous.rn-imessage"
    },
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#E6F4FE",
        "foregroundImage": "./assets/images/android-icon-foreground.png",
        "backgroundImage": "./assets/images/android-icon-background.png",
        "monochromeImage": "./assets/images/android-icon-monochrome.png"
      },
      "edgeToEdgeEnabled": true,
      "predictiveBackGestureEnabled": false,
      "package": "com.anonymous.rnimessage"
    },
    "web": {
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff",
          "dark": {
            "backgroundColor": "#000000"
          }
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true,
      "reactCompiler": true
    }
  }
}

Related Resources

Expo Router: The file-based routing library used in this project for navigation.
TanStack Query: A data-fetching library that simplifies managing server state, used here for optimistic updates and message fetching.
React Native New Architecture: Official documentation explaining the concepts and benefits of the Fabric renderer and TurboModules.