New Expo example project: Build native chat apps with TalkJS

Chris -

An new official Expo example project is here to help you get started adding chat into your native mobile apps. Whether you're building a messaging feature, customer support interface, or collaborative tool, this example gets you building with best practices for integrating TalkJS with Expo.

The example project showcases some common navigation patterns, such as:

  • Tab-based navigation with persistent state. Users can switch between conversations and other app sections without losing their place.
  • Nested stack navigation, where each tab maintains its own navigation history, so pressing back works as users expect.
  • Screen-specific navigation logic, allowing users to move between the conversation list and chatbox screens, with the UI adapting based on context.

The project uses Expo Router's file-based routing conventions, including route groups and shared routes, to keep the codebase organized and avoid duplication as your app grows.

Real-time data with the JavaScript Data API

Beyond navigation, the project includes integration with the JavaScript Data API (@talkjs/core). For instance, the data for the other participants’ names and profile pictures displayed in the app header all comes directly from the Data API. 

This way, you can build custom experiences with real-time chat data.

Get started in minutes

Clone the example project and follow these steps:

1. Install dependencies

npx pnpm install

2. Add your TalkJS App ID

Update the YOUR_APP_ID placeholder in src/constants/chat.ts with your own App ID, which you can find in the Settings tab of the TalkJS dashboard.

3. Configure push notifications

Follow the TalkJS Expo push notifications guide for Android or iOS setup.

4. Run the app

Make sure you have a physical device connected via adb (Android) or Xcode (iOS), or an emulator or simulator properly configured.

Start the React Native Metro in one terminal window:

npx expo start

Then in a separate terminal, build for your platform:

Android:

npx expo run:android

iOS:

npx expo run:ios --device

That’s it! You now have an active Expo project with TalkJS chat integrated.

Next steps

Explore the full example project in the TalkJS examples repository. For more information, check out: