React Native Threads Clone with Clerk, Convex & Sentry

This is a React Native Threads clone using Clerk for user authentication and Convex for all backend logic.

For improved debuggability, we've added Sentry to the project.

Additional features:

• Expo Router file-based navigation
• Convex Database for data storage
• Convex File Storage for file storage
• Convex Actions for push notifications
• Sentry for error tracking
• Haptics for haptic feedback
• Expo Notifications for push notifications
• Reanimated for powerful animations
• Image Zoom for image zoom component

Setup

Environment Setup

Make sure you have the Expo CLI installed.

Because we are using pre-built and a custom development client, you should download Android Studio and Xcode to your Mac. For more information on setting up your development environment, refer to the Expo documentation for Android Studio and the React Native documentation for Xcode.

App Setup

To build the app, perform the following steps:

1. Clone the repository
2. Run npm install
3. Run npx expo prebuild
4. Run npx expo run:ios or npx expo run:android

For Convex, you need to import the database from the db.zip file after setting up your Convex project.

npx convex import db.zip   

Finally, make sure to update the DUMMY.env file with your own Clerk and Convex credentials and rename it to .env.

Push Notifications Setup

For Push Notifications, you need to set up the Expo Push Notifications like presented in the video.

Then, add the access key to the Convex environment variables:

npx convex env set EXPO_ACCESS_TOKEN your-api-key

Clerk Setup

Authentication Setup

Create a Clerk account and project, then update the convex/auth.config.js file with your domain and applicationID.

export default {
  providers: [
    {
      domain: 'https://your-clerk-domain.clerk.accounts.dev',
      applicationID: 'your-clerk-application-id',
    },
  ],
};

You also need to connect Convex and Clerk with a JWT template. For this, cehck out the video and Convex docs.

Webhook Setup

You need to set up a webhook in Clerk to handle the user creation and update events.

1. Go to Clerk and select your project
2. Go to API and select Webhooks
3. Add the following webhook, which should point to your Convex instance and include the user.created and user.deleted events:

Sentry Setup

1. Create a Sentry account and project
2. Go to Project Settings and select Client Keys
3. Copy the DSN and add it to the .env file

App Screenshots

Demo

Convex Screenshots

Sentry Screenshots

🚀 More

Take a shortcut from web developer to mobile development fluency with guided learning

Enjoyed this project? Learn to use React Native to build production-ready, native mobile apps for both iOS and Android based on your existing web development skills.