Skip to content

Core Concepts in React Native

Jump to bottom
brewblue edited this page May 30, 2025 · 1 revision

React Native iOS Development Core Concepts

📁 The iOS Folder Structure

What happens when you run yarn ios?

  • Compilation: Your JavaScript/TypeScript code gets compiled into native iOS code
  • Build Generation: Creates a build/ folder containing:
    • Compiled app files ready for installation
    • Precompiled modules (for faster future builds)
    • Build logs and debugging info
    • Xcode index files for code navigation
  • App Launch: Installs and runs the app on simulator or device

Key Folders You'll See:

ios/
├── YourAppName/          # Main app folder
│   ├── *.entitlements    # App permissions/capabilities
│   └── Info.plist        # App configuration
├── Pods/                 # CocoaPods dependencies
└── build/                # Generated after compilation (safe to delete)

🔐 Entitlements - Your App's Permission System

Think of entitlements as your app's "ID card"

  • What they are: XML files that tell iOS what your app is allowed to do
  • Where they live: ios/YourApp/YourApp.entitlements
  • What they control:
    • Camera/photo access
    • iCloud storage
    • Push notifications
    • Background processing
    • Keychain access
    • And much more...

The Entitlements Flow:

1. Add entitlement to .entitlements file
2. Enable capability in Apple Developer Console
3. Update provisioning profile
4. Rebuild & reinstall app

📱 Physical Device vs Simulator - Key Difference

Why entitlements matter more on real devices:

  • Simulator: More permissive, often ignores missing entitlements
  • Physical Device: Strictly enforces all entitlements and permissions
  • Result: Apps that work in simulator may crash on real devices without proper entitlements

🔄 The Update Process - Why You Need to Reinstall

When you change entitlements:

❌ What DOESN'T work:

  • Just editing the .entitlements file
  • Hot reloading
  • Metro bundler refresh

✅ What you MUST do:

  1. Local: Update .entitlements file
  2. Remote: Enable capability in Apple Developer Console
  3. Rebuild: Clean build and compile again
  4. Reinstall: Deploy new version to device

Think of it like updating your driver's license:

  • Changing the file locally = filling out the form
  • Apple Developer Console = DMV approval
  • Rebuilding = printing the new license
  • Reinstalling = actually carrying the new license

🛠️ Practical Reinstall Commands

Clean slate approach (recommended):

# Clean everything
cd ios && rm -rf build/ && cd ..

# Refresh dependencies
cd ios && pod install && cd ..

# Deploy to device
yarn ios --device "Your iPhone Name"

Using Xcode (alternative):

  1. Open ios/YourApp.xcworkspace in Xcode
  2. Select your physical device as target
  3. Build and run (⌘+R)

💡 Key Mental Models

Entitlements = App Capabilities Contract

  • You're making a contract with Apple about what your app can do
  • Both your code AND Apple's servers must agree on this contract
  • Breaking the contract = app won't run on real devices

Build Folder = Temporary Kitchen

  • Gets messy during cooking (compilation)
  • Safe to clean and start fresh
  • Will be recreated every time you cook (build)

Physical Device = Production Reality

  • Simulator is like a rehearsal
  • Real device is the actual performance
  • What works in rehearsal might fail in the real show without proper preparation

🚨 Common Gotchas

  1. "Works in simulator, crashes on device" = Missing entitlements
  2. "Changed entitlements, nothing happened" = Forgot to rebuild/reinstall
  3. "Build fails with entitlement errors" = Apple Developer Console not updated
  4. "App installs but feature doesn't work" = Entitlement exists but provisioning profile is old

Remember: iOS development requires this three-way handshake between your code, Apple's servers, and the device. Skip any step, and things break!

Clone this wiki locally