implement Layout files and Stack navigation in a React Native application using Expo Router.

Stack -> a component and a template which wraps the rest of our pages.

1. The Layout File (_layout.jsx)

A layout file acts as a template that wraps all the pages within a directory. It allows you to share common UI elements (like footers or headers) across multiple screens.

• File Naming: The file must be named _layout.jsx (starting with an underscore) and placed inside the /app folder.
• Default Behavior: Without a layout file, Expo Router automatically renders index.jsx. With a layout file, it renders the layout instead.
• The <Slot /> Component: Since the layout wraps your pages, you must use the Slot component from expo-router to tell the layout where to render the specific page content. similarly as we do in ReactJS → props.children

import { StyleSheet, Text, View } from "react-native";
import { Slot } from "expo-router";

*const _layout = () => {
  return (
    <View style={{ flex: 1 }}>*
      <Slot />
      <Text>Footer</Text>
    *</View>
  );
};*

*export default _layout;

const styles = StyleSheet.create({});*

the footer keyword you can see here ————————→

2. Stack Navigation

While Slot simply renders the page, the <Stack /> component provides a "Native" navigation experience.

• Features: Automatically adds a header bar at the top and a "Back" button when navigating between screens.

*import { StyleSheet, Text, View } from "react-native";
import React from "react";*
import { Stack, Slot } from "expo-router";

*const _layout = () => {
  return (
    <View style={{ flex: 1 }}>*
      <Stack />
      <Text>Footer</Text>
    *</View>
  );
};

export default _layout;

const styles = StyleSheet.create({});*

• The "Stack" Mental Model: Think of pages as a physical deck of cards.
  • Push: When you go to a new page, it is placed on top of the current one.
  • Pop: When you hit "Back," the top card is removed, revealing the previous page.