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.
Navigation using Expo Router
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 install2. 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 startThen in a separate terminal, build for your platform:
Android:
npx expo run:androidiOS:
npx expo run:ios --deviceThat’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: