Layout

A layout is a structure for consistently managing UI elements that repeat across multiple pages (headers, navigation bars, footers, etc.). By defining a shared layout, you can reduce code duplication and provide a consistent user experience.

Creating a layout file

A layout is _layout.tsx defined by creating a file. The scope it applies to depends on the file's location.

import { PropsWithChildren } from "react";

export default function Layout({ children }: PropsWithChildren) {
  return <>{children}</>;
}

Setting the layout scope

Layouts are automatically applied according to the file path.

• pages/_layout.tsx: Applied globally to all pages.
• pages/about/_layout.tsx: intoss://{serviceName}/about Applied only to all pages under it.

Layouts can be nested. When multiple layouts are used together, they are applied in order starting from the layout in the parent directory.

pages/
├── _layout.tsx          // Global layout
├── about/
│   ├── _layout.tsx     // about section layout
│   ├── index.tsx       // about main page
│   └── team.tsx        // team introduction page
└── index.tsx           // main page

For example, if the structure is as shown above, about/team.tsx the page will have layouts applied in the following order.

1. pages/_layout.tsx (global layout)
2. pages/about/_layout.tsx (section layout)
3. pages/about/team.tsx (actual page component)

With this structure, you can separately manage UI elements needed globally and UI elements needed only in specific sections.

Layout example

Global layout

Let's create a layout that applies to all pages.

pages/_layout.tsx

import { PropsWithChildren } from "react";
import { View } from "react-native";
import { Header } from "../components/Header";
import { Footer } from "../components/Footer";

export default function Layout({ children }: PropsWithChildren) {
  return (
    <View style={{ flex: 1 }}>
      <Header />
      {children}
      <Footer />
    </View>
  );
}

components/Header.tsx

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

export function Header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>My App</Text>
      <View style={styles.nav}>
        <Text style={styles.navItem}>Home</Text>
        <Text style={styles.navItem}>About</Text>
        <Text style={styles.navItem}>Settings</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    padding: 16,
    backgroundColor: "#ffffff",
    borderBottomWidth: 1,
    borderBottomColor: "#e5e5e5",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 8,
  },
  nav: {
    flexDirection: "row",
    gap: 16,
  },
  navItem: {
    fontSize: 16,
    color: "#666666",
  },
});

components/Footer.tsx

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

export function Footer() {
  return (
    <View style={styles.footer}>
      <Text style={styles.copyright}>© 2024 My App. All rights reserved.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  footer: {
    padding: 16,
    backgroundColor: "#f5f5f5",
    alignItems: "center",
  },
  copyright: {
    fontSize: 14,
    color: "#666666",
  },
});

Section-specific layout

You can create a layout used only in a specific section.

pages/about/_layout.tsx

import { PropsWithChildren } from "react";
import { View } from "react-native";
import { AboutSidebar } from "../../components/AboutSidebar";

export default function AboutLayout({ children }: PropsWithChildren) {
  return (
    <View style={{ flexDirection: "row" }}>
      <AboutSidebar />
      <View style={{ flex: 1 }}>{children}</View>
    </View>
  );
}

components/AboutSidebar.tsx

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

export function AboutSidebar() {
  return (
    <View style={styles.sidebar}>
      <Text style={styles.title}>About</Text>
      <View style={styles.menu}>
        <Text style={styles.menuItem}>Company Overview</Text>
        <Text style={styles.menuItem}>Team Introduction</Text>
        <Text style={styles.menuItem}>History</Text>
        <Text style={styles.menuItem}>Directions</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  sidebar: {
    width: 200,
    padding: 16,
    backgroundColor: "#f8f9fa",
    borderRightWidth: 1,
    borderRightColor: "#e5e5e5",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    marginBottom: 16,
  },
  menu: {
    gap: 12,
  },
  menuItem: {
    fontSize: 16,
    color: "#495057",
  },
});

Getting query parameters from a layout

You can use query parameters in a layout as well. useParams By using the hook, you can read the current screen's parameters and use them dynamically.

useParams Hook usage example

The example below shows the URL query parameter passed in title and displays it as the title at the top of the screen.

pages/_layout.tsx

import { useParams } from "@granite-js/react-native";
import { PropsWithChildren } from "react";
import { View, Text } from "react-native";

export default function Layout({ children }: PropsWithChildren) {
  // Get the parameters of the current screen.
  const params = useParams({ strict: false });

  // Get the 'title' parameter and set a default value.
  const title = params?.title ?? "Default Title";

  return (
    <View style={{ flex: 1 }}>
      {/* Dynamically generated header */}
      <View style={{ padding: 16, backgroundColor: "#f0f0f0" }}>
        <Text style={{ fontSize: 20, fontWeight: "bold" }}>{title}</Text>
      </View>
      {/* Render child components */}
      <View style={{ flex: 1 }}>{children}</View>
    </View>
  );
}

Reference docs

• Navigating screens
• Using query parameters