Screen Configuration

🎬 React Native Navigation: Screen Configuration

The Movie Theater Analogy 🎥

Imagine you’re building a movie theater. Each screen in your app is like a different movie room. But what makes each room special? The decorations, signs, doors, and how you walk between rooms!

That’s exactly what Screen Configuration does in React Native Navigation. It lets you customize how each “room” (screen) looks and behaves.

🎯 What We’ll Learn

graph TD
    A["Screen Configuration"] --> B["Screen Options"]
    A --> C["Header Title"]
    A --> D["Header Style"]
    A --> E["Header Components"]
    A --> F["Modal Screens"]
    A --> G["Screen Transitions"]
    A --> H["Custom Transitions"]

1️⃣ Screen Options: The Control Panel

What Is It?

Think of Screen Options as a remote control for your screen. Just like a TV remote lets you change volume, brightness, and channels, screenOptions lets you change how your screen looks and behaves!

Simple Example

<Stack.Navigator
  screenOptions={{
    headerShown: true,
    gestureEnabled: true,
  }}
>
  <Stack.Screen name="Home" />
</Stack.Navigator>

Real-Life Comparison

Per-Screen Options

You can also set options for just ONE screen:

<Stack.Screen
  name="Profile"
  options={{
    headerShown: false,
  }}
/>

Pro Tip: Options set on a specific screen override the navigator’s screenOptions!

2️⃣ Header Title: The Room Sign

What Is It?

Every movie room has a sign saying what movie is playing. The Header Title is that sign for your screen!

Three Ways to Set It

Way 1: Automatic (from name)

<Stack.Screen name="My Profile" />
// Shows "My Profile" in header

Way 2: Using title option

<Stack.Screen
  name="Profile"
  options={{ title: 'My Account' }}
/>

Way 3: Dynamic title (changes based on data)

<Stack.Screen
  name="UserProfile"
  options={({ route }) => ({
    title: route.params?.userName ?? 'Profile'
  })}
/>

Visual Example

┌─────────────────────────────┐
│  ←  │   My Account    │    │
├─────────────────────────────┤
│                             │
│     Screen Content          │
│                             │
└─────────────────────────────┘

3️⃣ Header Style: Painting the Sign

What Is It?

Now that you have a sign, let’s make it beautiful! Header Style is like choosing paint colors and decorations for your sign.

The Paint Buckets

<Stack.Screen
  name="Home"
  options={{
    headerStyle: {
      backgroundColor: '#6366f1',
    },
    headerTintColor: '#ffffff',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 18,
    },
  }}
/>

What Each Property Does

Quick Visual

Before:                    After:
┌───────────────┐         ┌───────────────┐
│  ← │ Home │   │  →     │██████████████│ Purple!
│    │ (gray)   │         │ ← │ Home │   │ White text!
└───────────────┘         └───────────────┘

4️⃣ Header Components: Custom Decorations

What Is It?

Sometimes a sign isn’t enough! You want to add a bell, search glass, or profile picture to your header. That’s what Header Components do!

The Three Spots

<Stack.Screen
  name="Home"
  options={{
    headerLeft: () => (
      <MenuButton />
    ),
    headerRight: () => (
      <SearchIcon />
    ),
    headerTitle: () => (
      <LogoImage />
    ),
  }}
/>

Where They Go

┌─────────────────────────────────────┐
│ [headerLeft] [headerTitle] [headerRight] │
└─────────────────────────────────────┘

Example:
┌─────────────────────────────────────┐
│   ☰      │  🏠 MyApp  │     🔍  🔔  │
└─────────────────────────────────────┘

Complete Example

options={{
  headerRight: () => (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity
        onPress={() => alert('Search!')}
      >
        <Icon name="search" size={24} />
      </TouchableOpacity>
    </View>
  ),
}}

5️⃣ Modal Screens: The Pop-Up Window

What Is It?

Imagine watching a movie, and suddenly a small window pops up asking “Do you want popcorn?” That’s a Modal! It slides up from the bottom and covers most of the screen.

How Modals Are Different

Setting Up Modals

Step 1: Create a Group for Modals

<Stack.Navigator>
  <Stack.Group>
    <Stack.Screen name="Home" />
    <Stack.Screen name="Profile" />
  </Stack.Group>

  <Stack.Group
    screenOptions={{ presentation: 'modal' }}
  >
    <Stack.Screen name="Settings" />
    <Stack.Screen name="Help" />
  </Stack.Group>
</Stack.Navigator>

Step 2: Or Set on Single Screen

<Stack.Screen
  name="Popup"
  options={{ presentation: 'modal' }}
/>

Modal Presentation Options

// Different modal styles:
presentation: 'modal'           // Standard modal
presentation: 'transparentModal' // See-through background
presentation: 'containedModal'   // Stays in navigator bounds
presentation: 'fullScreenModal'  // Full screen modal

6️⃣ Screen Transitions: How Doors Open

What Is It?

When you walk from one movie room to another, the door can open in different ways - swing, slide, or spin! Screen Transitions control how screens appear and disappear.

Built-in Animations

<Stack.Navigator
  screenOptions={{
    animation: 'slide_from_right',
  }}
>

Animation Options

Per-Screen Animation

<Stack.Screen
  name="Details"
  options={{
    animation: 'fade',
  }}
/>

iOS vs Android Defaults

iOS Default:          Android Default:
┌───┐ ┌───┐          ┌───┐
│ A │→│ B │          │ A │ fade → │ B │
└───┘ └───┘          └───┘
(slide)              (fade from bottom)

7️⃣ Custom Transitions: Design Your Own Door

What Is It?

The built-in animations are nice, but what if you want something unique? Custom Transitions let you create your own magical door animations!

The Ingredients

graph TD
    A["Custom Transition"] --> B["cardStyleInterpolator"]
    A --> C["gestureDirection"]
    A --> D["transitionSpec"]
    B --> E["Animate card position/opacity"]
    C --> F["Which way to swipe"]
    D --> G["Timing and spring config"]

Simple Custom Transition

import {
  CardStyleInterpolators
} from '@react-navigation/stack';

<Stack.Screen
  name="Special"
  options={{
    cardStyleInterpolator:
      CardStyleInterpolators
        .forHorizontalIOS,
  }}
/>

Building From Scratch

const customTransition = {
  cardStyleInterpolator: ({ current }) => ({
    cardStyle: {
      opacity: current.progress,
      transform: [
        {
          scale: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0.9, 1],
          }),
        },
      ],
    },
  }),
};

<Stack.Screen
  name="Fancy"
  options={customTransition}
/>

What This Does

Start (progress = 0):     End (progress = 1):
┌─────────────┐          ┌─────────────┐
│             │          │             │
│   Small &   │    →     │   Full &    │
│   Faded     │          │   Visible   │
│             │          │             │
└─────────────┘          └─────────────┘
   90% size               100% size
   0 opacity              1 opacity

Gesture Configuration

options={{
  gestureEnabled: true,
  gestureDirection: 'horizontal',
  gestureResponseDistance: 100,
}}

🎁 Quick Reference Summary

graph TD
    A["Screen Config"] --> B["screenOptions"]
    A --> C["options"]

    B --> D["Apply to ALL screens"]
    C --> E["Apply to ONE screen"]

    D --> F["headerShown<br>gestureEnabled<br>animation"]
    E --> G["title<br>headerStyle<br>headerRight<br>presentation"]

🌟 Golden Rules

1. screenOptions = Settings for ALL screens in a navigator
2. options = Settings for ONE specific screen
3. Specific beats general = Screen options override navigator options
4. Modals slide up = Regular screens slide sideways
5. Custom = Power = Build any transition you can imagine!

🚀 What You’ve Mastered!

You’re now a Screen Configuration wizard! 🧙‍♂️

Every screen in your app can be customized exactly how you want it. Go build something amazing!