Customize the ChatGPT React Native App

Use this guide when turning the boilerplate into your own branded iOS and Android app.

Product page: ChatGPT React Native App Template

Quick Answer

Start with app identity, then configure services, update theme and copy, adjust the AI assistant behavior, and run yarn verify before delivery.

1. Change App Identity

Update these files before release:

What to change	Where
Display name	app.json, Android strings, and Xcode project settings
iOS bundle identifier	Xcode project, Apple Developer portal, and Firebase iOS app
Android package/application ID	android/app/build.gradle and Firebase Android app
App icon	ios/Instamobile/Images.xcassets/AppIcon.appiconset and Android mipmaps
Splash screen	ios/Instamobile/LaunchScreen.storyboard and Android launch resources
Public app metadata	ReactNativeChatGPTApp/.env.example values copied into your environment

After identity changes, replace the Firebase config files again if the bundle ID or package name changed.

2. Update Product Copy and Feature Toggles

Most app-level copy and feature flags live in:

• src/config/index.tsx
• src/config/environment.ts
• src/translations

Common changes:

• onboarding text
• terms and privacy URLs
• contact information
• enabled auth providers
• Google Maps API key
• Facebook and Google login IDs
• upload function URL

3. Customize Theme and UI

The reusable UI foundation lives under src/core/dopebase.

Use these areas first:

• theme colors and appearances
• reusable form components
• profile picture and media components
• localization helpers
• shared advanced components such as stories, modals, and selectors

Keep shared UI changes inside reusable modules when they should be reused by other Instamobile apps.

4. Customize the AI Assistant

The assistant response flow is backend-driven:

Change	File
OpenAI model	firebase/functions/openai/openai.js or OPENAI_MODEL
Temperature and token limit	firebase/functions/openai/openai.js
Assistant sender name	firebase/functions/chat/chat.js
Assistant avatar	firebase/functions/chat/chat.js
Message insertion flow	firebase/functions/chat/chat.js and firebase/functions/chat/utils.js

If you want a domain-specific assistant, adjust the backend prompt construction before calling OpenAI. Keep that logic in Firebase Functions so the mobile app does not expose private instructions or API keys.

5. Work With Core Modules

Reusable product modules live in src/core.

Important modules:

Module	Purpose
chat	Chat screens, message UI, chat hooks, and chat Redux state
onboarding	Authentication APIs, login/signup/SMS screens, and auth state
notifications	Notification screen, Redux state, and Firebase subscription code
profile	Profile, edit profile, settings, and profile auth hooks
socialgraph	Friendships, followers, search, and social graph hooks
user-reporting	Block and report user APIs
media	Media processing and upload adapters
firebase	Shared Firebase config

All reusable source under src/core is TypeScript. Keep module types close to each module, usually in a local types.ts, so a module folder can be reused in another React Native app without hunting for global type files.

6. Keep Firebase Costs Under Control

When customizing list screens, avoid these patterns:

• listeners without limit
• search requests on every keystroke
• typing indicator writes on every input change
• online status writes on every app or network event
• updating a document and immediately reading it again when local state is enough

The template already includes cost controls for these flows. Preserve them when adding new Firebase-backed screens.

7. Customization Checklist

Before handing the app to a customer:

• App name changed on iOS and Android
• Bundle ID and package name changed
• Firebase iOS and Android apps recreated or updated
• Icons and splash screen replaced
• Auth providers configured
• OpenAI key configured only on the backend
• Upload function URL configured
• Push notification credentials configured if push is enabled
• Terms and privacy URLs updated
• yarn lint passes with zero warnings
• yarn verify passes

FAQ

Can I copy one core module into another React Native app?

Yes. The project is structured so reusable modules keep their local TypeScript types and exports close to the module.

Should I change OpenAI prompts in the mobile app?

No. Put assistant prompt and model logic in Firebase Functions so it remains private and can be changed without exposing secrets in the app bundle.

What should I customize first?

Start with app identity and Firebase config. UI changes are easier to test after the app is connected to your own backend.