ChatGPT React Native App Template
The Instamobile ChatGPT React Native App is a React Native CLI boilerplate for building an AI chat app with Firebase, OpenAI-powered assistant replies, user profiles, media upload, push notifications, and reusable core modules.
Product page: ChatGPT React Native App Template
Quick Answer
To run the app, install the pinned tooling, install JavaScript and native dependencies, replace Firebase placeholder files, then start Metro and run the iOS or Android app from the ReactNativeChatGPTApp folder.
cd ReactNativeChatGPTApp
corepack enable
yarn install
bundle install
bundle exec pod install --project-directory=ios
yarn start
yarn ios
For Android:
cd ReactNativeChatGPTApp
yarn android
What Ships in the Template
| Area | Included |
|---|---|
| Mobile app | React Native CLI app with Expo modules in a bare native project |
| AI chat | Firebase Cloud Function calls OpenAI and writes assistant messages back to chat |
| Authentication | Firebase Auth with SMS enabled by default, Apple on iOS, optional Google and Facebook |
| Data | Firestore-backed users, chat, notifications, social graph, profile, and user reporting |
| Media | Firebase Function endpoint for upload processing |
| Architecture | TypeScript source under src, Hermes, and React Native New Architecture enabled |
| Quality gates | Lint, TypeScript, Jest, Expo Doctor, iOS bundle check, and Android debug build scripts |
Requirements
Use the versions expected by the template:
- Node.js 22.14 or newer in the Node 22 line
- Yarn 4 through Corepack
- Xcode 16.1 or newer
- Android Studio with SDK 36 and NDK 27.1.12297006
- Ruby and Bundler for CocoaPods
- Firebase CLI for deploying the backend functions
Recommended Setup Order
- Install the local development tools.
- Run the app once with placeholder config to confirm your environment.
- Create your own Firebase project.
- Replace iOS and Android Firebase config files.
- Deploy the Firebase Functions backend.
- Add the OpenAI API key to the Firebase Functions environment.
- Configure auth providers, push notifications, and upload URL.
- Customize app name, bundle IDs, icons, splash screen, copy, and theme.
- Run the verification gate before handing off or publishing.
Project Folders
Use these folders when working from the downloaded archive:
| Folder | Purpose |
|---|---|
ReactNativeChatGPTApp | Mobile app source code |
ReactNativeChatGPTApp/src/core | Reusable TypeScript core modules |
ReactNativeChatGPTApp/src/config | App feature flags, copy, theme, and public runtime config |
firebase/functions | Firebase Cloud Functions backend |
firebase/functions/openai/openai.js | OpenAI client and model selection |
firebase/functions/chat/chat.js | Chat Cloud Functions, including AI assistant message flow |
Run Verification
Before making a release or delivering a customized build, run:
cd ReactNativeChatGPTApp
yarn verify
When debugging, run checks one by one:
yarn lint
yarn typecheck
yarn test --runInBand
yarn doctor
yarn bundle:ios:ci
cd android && ./gradlew app:assembleGooglePlayDebug
Next Steps
- View the ChatGPT React Native App product page
- Configure Firebase and OpenAI
- Customize the ChatGPT React Native app
- Prepare the app for release
- Troubleshoot common setup issues
FAQ
Is this an Expo app or a React Native CLI app?
It is a React Native CLI app. It also uses Expo SDK modules inside the bare native project.
Can I run it without Firebase?
Not for the full product experience. Authentication, chat data, media upload, push notifications, and AI assistant integration are built around Firebase.
Where should the OpenAI API key go?
Keep the OpenAI API key in the Firebase Functions environment only. Do not put it in the mobile app, .env.example, or any EXPO_PUBLIC_ variable.