Branding & Customization
How to customize the boilerplate for your brand. One boilerplate, 20+ apps — each with its own font, colors, icon, and system prompt.
Quick Start: Setup CLI
npm run setupThe interactive setup wizard configures app name, bundle ID, brand colors, feature toggles, and creates your .env from .env.example.
Configuration Files
| File | Purpose |
|---|---|
constants/brand.ts | App identity, colors, gradients, font choice |
constants/features.ts | Feature flags, app templates |
constants/onboarding.ts | Onboarding slides configuration |
constants/paywall.ts | Premium screen benefits, free trial settings |
constants/theme.ts | UI theme, spacing, typography tokens |
locales/*.ts | Translations and copy |
Typography / Font System
6 premium font families are loaded at app startup. Change your app's font with one line in src/constants/brand.ts. theme.ts and _layout.tsx handle the rest automatically.
| Font | Style | Best For |
|---|---|---|
| Inter (default) | Clean, modern, neutral | AI tools, utilities, SaaS |
| Poppins | Friendly, rounded | Lifestyle, fun, social |
| Space Grotesk | Futuristic, technical | Tech, AI, innovation |
| DM Sans | Elegant, sophisticated | Premium, luxury, fashion |
| Outfit | Modern, geometric | Professional, business |
| Montserrat | Classic, impactful | Outdoor, sports, bold brands |
src/constants/brand.ts
export const BRAND = {
name: "SnakeID",
tagline: "Identify Any Snake Instantly",
font: "Inter", // ← Change this one line to switch fonts
// ...
};Space Grotesk only goes up to weight 700, so
extraBold and black map to 700 for that font.Brand Colors
src/constants/brand.ts
export const BRAND = {
colors: {
primary: "#E53E3E", // Main brand color
primaryLight: "#FC8181", // Lighter variant
primaryDark: "#C53030", // Darker variant
secondary: "#F56565", // Secondary accent
accent: "#FED7D7", // Highlights, badges
success: "#34C759", // Positive feedback
error: "#FF3B30", // Errors, destructive
warning: "#FF9500", // Warnings
},
gradients: {
primary: ["#E53E3E", "#C53030"], // CTAs, headers
premium: ["#FFD700", "#FF9500"], // Upgrade buttons
onboarding: ["#E53E3E", "#FEB2B2"], // Onboarding screens
},
};Quick Branding Checklist
| Task | Where |
|---|---|
| App name | app.json + constants/brand.ts |
| Bundle identifier | app.json ios.bundleIdentifier + android.package |
| App icon | assets/icon.png + assets/adaptive-icon.png |
| Splash screen | assets/splash.png + splash.backgroundColor in app.json |
| Brand colors | constants/brand.ts |
| Font family | BRAND.font in constants/brand.ts |
| App copy / translations | locales/en.ts |
| Onboarding slides | constants/onboarding.ts |
| Paywall benefits | constants/paywall.ts |
| Privacy/Terms URLs | BRAND.links in constants/brand.ts |
Onboarding Patterns
The boilerplate includes a cinematic onboarding flow with video backgrounds. Key configuration options in constants/onboarding.ts:
| Setting | Value | Why |
|---|---|---|
showSkipButton | false | No skip — onboarding sells the premium value |
| Video background tint | rgba(0,0,0,0.3) | Base dark overlay ensures text readability |
| Gradient overlay | Bottom gradient on top of tint | Additional contrast for bottom text/buttons |
| Navigation buttons | 54x54 square prev + flex:1 next | Asymmetric layout emphasizes forward progression |
| Animations | Reanimated FadeIn/FadeInDown | Smooth entry animations for each slide element |
Paywall Configuration
Configure the premium screen in constants/paywall.ts. The boilerplate uses a VidNotes-style paywall with video background and benefit list.
src/constants/paywall.ts
export const PAYWALL_CONFIG = {
benefits: [
{ icon: "fish", titleKey: "premium.benefit1", description: "..." },
{ icon: "camera", titleKey: "premium.benefit2", description: "..." },
// ...
],
showFreeTrial: true,
trialDays: 7,
videoBackground: true,
};Mock offerings must match production: When testing locally, mock offerings must use
packageType: "ANNUAL" and "WEEKLY" (not "MONTHLY"). The yearly mock must include introPrice with periodNumberOfUnits: 7, periodUnit: "DAY" for the trial badge to render correctly.App Templates
The setup CLI lets you choose a pre-configured template:
| Template | Features Enabled |
|---|---|
| Image Generation | Image Gen, Image ID |
| Video Generation | Video Gen |
| Audio Generation | Text to Speech |
| Transcription | Speech to Text |
| Full Audio | TTS + Transcription |
| Full Suite | All features enabled |
| Custom | Choose individually |
One Boilerplate, 20+ Apps
Per-app customization in minutes
Change font, colors, and system prompt — ship a new app from the same codebase.
6 font families
Brand color system
Multi-app workflow
Get ShipReactNative
Save 40+ hours of setup