? Stack Navigation Styling

? Quick Overview

Stack Navigation styling in React Native allows you to customize headers, transitions, colors, titles, and gestures for screens managed by createNativeStackNavigator or createStackNavigator.

? Key Concepts

• Global header styling using screenOptions
• Per-screen customization using options
• Header title, colors, and alignment
• Custom header components
• Gesture and animation styling

? Syntax / Theory

Stack navigator styling is controlled using configuration objects. You can apply styles globally or override them for individual screens.

// Import stack navigator from React Navigation
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: "#2563eb" },
        headerTintColor: "#ffffff",
        headerTitleStyle: { fontWeight: "bold" }
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

? Live Output / Explanation

? Interactive Example

Use the simulator below to experiment with header styling properties. Change the controls to see how the code and the mobile preview update in real-time.

// Dynamic header color using props
options={{
  headerStyle: {
    backgroundColor: route.params?.color || "#16a34a"
  }
}}

? Use Cases

• Brand-based header theming
• Dark / light mode navigation headers
• Custom back buttons and titles
• Screen-specific animations