Build a ChatGPT Clone with React Native (Expo, SQLite, RevenueCat, Clerk, OpenAI)

Join me as I build an epic ChatGPT Clone with React Native using Clerk & RevenueCat! In this exciting tutorial, you'll learn how to do the following:

Key Features:
🚀 Use Expo to set up the app and enable custom native modules
💫 Create animated intro screens with custom components
📦 Implement Clerk for user authentication with email
🔐 Protect pages with Expo Router and Clerk authentication
🎨 Customize a drawer menu with unique icons, sizes, and colors
🔄 Utilize the Zeego library for dynamic context menus and dropdowns
📸 Add an image viewer component with zoom and blur effects
🧠 Integrate OpenAI API for chat functionality and image generation
💬 Build a smooth chat UI with animated input components
🗄️ Store user API keys efficient with MMKV
🌐 Implement real-time data streaming from OpenAI
🗃️ Load and manage chat history with SQLite
💵 Incorporate in-app purchases with RevenueCat

+ A LOT OF FUN 🚀

LINKS

#############################

❤️ You can also find me on:

#############################

00:00 About this clone
02:42 ChatGPT Clone Overview
06:50 App setup and Expo prebuild
17:46 Animated Intro Screen
29:38 Creating a Bottom Sheet and Modal
55:22 Authentication with Clerk
01:17:19 Creating a custom drawer navigation
01:47:52 Zeego header dropdown
02:03:34 Animated message input
02:34:00 Building the chat messages UI
03:04:51 Storing data with MMKV
03:25:15 Streaming OpenAI results
03:39:58 Image generation with Dall·E
03:56:29 Context menu with save, copy and share
04:12:45 Image viewer with controls
04:40:03 Custom blurred header with scrollview
04:52:03 Explore page with loading animations
05:08:44 Persisting chats with storage
05:37:11 Loading data from SQLite
05:57:28 RevenueCat in-app subscriptions
06:47:25 Breakdown

[LearnWithRabbi]

"Hey Simon! I'm a huge fan of your React Native tutorials on YouTube. Your content is so inspiring that I even dreamt about meeting you last night, and we hugged! Keep up the amazing work. 🚀🤗"

[dedanmsafari]

My favourite page was the one you didnt like as much...lol the explore gpts page.I loved the shimmer..the blur header and scroll view and the fade animations : )

[EmiliaKaida]

thank you so much for this tutorial! 👍
Hoping you could do a language-learning app (maybe like Duolingo, maybe specific to your preferences :D) Would be interesting to see how we deal with data (where to get data: dictionaries, synsets and related stuffs)

[El_ii]

Wow, that's so cool. I always failed to make ChatGPT stream in real-time in my React Native app. I'm going to try that again.

[mohamedelzohery-xl]

cool video thanks for this amazing tutorial! at 5:26:00 consider adding chatId in the dependency params of event handler useEfffect as a cleaner solution than ref.

[grimm_gen]

Simon thank you again for another sick upload! You give alot to the react native community!

[ghrbb-dd]

I really appreciate what you've done on this video. It took me a few days to do it but I learned a lot. Thank you for this content, it is inspiring.

[mrmadhan]

@1:55:06 for android it is working . And i didn't added expo build properties in the app.json

[muratyasar]

bro you are too good :) I think you should fasten your seatbelt because your channel will finally take off this year!🚀🚀

[Biddenn]

First like and first comment. Looking forward to built it.

[Alex-orbz]

Would love to see a tutorial on creating animations!

[justpatrick_]

Wow, thank you for your awesome contributions to the community.

[fabsync]

Great tutorial man! Love your style, technique and stack! It will be great to see something "responsive/multiplatform"... now that components will be using side server rendering...

[TheAremoh]

Great tutorial Simon.

I listened to the apps conf talk about building micro apps in a mono repo using expo, I didn't quite get it though. If you do listen the talk and you understood it, could you please throw more light on with a quick video? Thanks

[naveengummella]

Hey man! great video still starting up and yup we need a video on animated login screen react native redash

[LucasHenrique-lvmc]

Amazing!! 🚀

One doubt, which plugin or extension are you using for autocomplete context in zsh term?

[ShivamTripathi-qdsw]

I have created the signup and login screen but when i'm trying to signup it is showing me error
[RemoteTextInput] -[RTIInputSystemClient perform input operation requires a valid sessionID.
inputModality = Keyboard, inputOperation = <null selector>, customInfoType = UIEmojiSearchOperations

[editorialreviews]

Which extension are you using for suggestions?

[zajjajbinsana]

Hi simon, you are doing so amazing, I really love the hard work you putting into this channel and students like me are really benefiting from this. A small request, can you make a video on supabase interacting with realtime database . I would be really grateful.

[ramprasadchauhan]

Thank you for providing this project ❤❤