create-rn-foundation

Scaffold a production-minded React Native foundation — not a fake product app.

The CLI resolves latest stable packages, creates a fresh native project, then overlays typed architecture, Arabic/English RTL, theming, navigation, state, BootSplash, tests, and AI coding rules. You start building features instead of rewiring the same infrastructure.

Author: Ahmed Samir Elsaka

Demo

Download MP4 (~37s) — title slides, live onboarding/home/settings captures, and the language-change confirmation alert.

Quick start

npx create-rn-foundation MyApp ~/work --lang ar

Then:

cd ~/work/MyApp
yarn start
yarn ios      # macOS + Xcode
yarn android # emulator or device

Interactive wizard (prompts for name, path, language, images, colors, package manager):

npx create-rn-foundation

From GitHub (same CLI, useful before a release hits npm):

npx github:AhmedSamirElsaka/create-rn-foundation MyApp ~/work --lang ar

Requirements: Node.js >=22.11.0, Xcode (for iOS), Android SDK (for Android). CocoaPods installs automatically on macOS unless you pass --skip-pods.

What you get

| Area | Included | |------|----------| | Architecture | Feature folders, shared UI, typed theme | | Navigation | Root stack + Home/Settings tabs with nested stacks | | i18n / RTL | ar / en, confirm alert, persist, restart, then apply language | | Theme | Light/dark tokens from --colors JSON (docs/colors.schema.json) | | State | Redux Toolkit + MMKV persist (onboarding only) | | Data | React Query + typed Axios factory | | Native | BootSplash, adaptive icons, Ionicons, allowRTL on iOS/Android | | DX | ESLint, TypeScript, Jest, Cursor rules, CLAUDE.md |

Not included by design: auth, search, profile, messaging, or other product screens. Replace Home/Settings with your product flows.

Options

create-rn-foundation
create-rn-foundation <AppName> <path> [options]

--path, --directory <path>     Project parent dir, or full app folder
--title <name>                 English and Arabic display name
--title-en <name>              English display name
--title-ar <name>              Arabic display name
--bundle-id <id>               iOS/Android ID (default: com.<appname>)
--lang, --default-language     Default UI language: ar (default) or en
--image <file>                 Sets both splash and icon images
--splash-image <file>          Splash logo (PNG, JPG, WEBP, or SVG)
--icon <file>                  Square app icon image
--rounded-icon                 Mask iOS icons with a rounded square
--package-manager, --pm        yarn (default) or npm
--colors <json|file>           Color scheme (docs/colors.schema.json)
--version-policy <mode>        latest (default) or pinned fallback
--primary-color <#RRGGBB>      Overrides colors.light.primary
--splash-background <#RRGGBB>  Splash background
--icon-background <#RRGGBB>    Adaptive Android / iOS icon background
--verify-native                Build Android and iOS after generation
--skip-native-build            Default. Skip native compile verification
--skip-pods                    Skip CocoaPods installation
--skip-git                     Skip Git initialization
--no-interactive               Fail instead of prompting for missing values
--dry-run                      Print the resolved plan only

Full example

npx create-rn-foundation TravelMate ~/work \
  --title-en "Travel Mate" \
  --title-ar "رفيق السفر" \
  --bundle-id com.acme.travelmate \
  --lang ar \
  --pm yarn \
  --splash-image ./splash.png \
  --icon ./icon.png \
  --rounded-icon \
  --colors ./colors.json \
  --primary-color "#0B6E69"

Color scheme JSON

Pass a file that matches docs/colors.schema.json (see docs/colors.example.json):

npx create-rn-foundation TravelMate ~/work --colors ./colors.json

Minimal shape (all values #RRGGBB; omitted tokens fall back to defaults):

{
  "light": { "primary": "#0B6E69" },
  "dark": { "primary": "#5EEAD4" },
  "splashBackground": "#F1F5F9",
  "iconBackground": "#F1F5F9"
}

Language and RTL

• Default language is Arabic (--lang ar) unless overridden.
• Settings / onboarding show a confirmation alert before switching.
• On confirm, the choice is saved to MMKV and the app restarts.
• The new language and layout direction apply after relaunch (no mid-session flash).
• Native allowRTL(true) is wired on iOS and Android.

After generation

cd <YourApp>
yarn start          # Metro
yarn ios / android  # native run
yarn validate       # lint + types + tests
yarn generate:icons # after changing the logo
yarn native:id com.company.app

Read docs/ARCHITECTURE.md in the generated app before adding product features under src/features/<feature>/.

Platform notes

| Platform | Notes | |----------|--------| | macOS | Full iOS + Android support | | Linux / Windows | Android generation works; skip iOS pods (--skip-pods) or generate on a Mac for iOS | | Disk space | Keep ~20GB+ free before yarn ios — Xcode DerivedData grows quickly |

Version policy

Default latest resolves npm latest dist-tags at generate time and rejects prereleases. Use --version-policy pinned for offline/reproducible baselines. Details: docs/VERSIONS.md.

Develop this CLI

git clone https://github.com/AhmedSamirElsaka/create-rn-foundation.git
cd create-rn-foundation
yarn install
yarn validate
yarn smoke

Release checklist: docs/RELEASING.md.
LinkedIn / launch notes: docs/LAUNCH.md.

License

MIT — see LICENSE.