# Adding Pages

## Overview

ShipNative uses expo app router to handle navigation. Expo router natively supports, a slot, stack, tab, and drawer navigation. To learn more about expo router, [read the docs](https://docs.expo.dev/router/layouts/). By default, ShipNative uses a tab navigator + stack navigator to manage the content of the app.

## New Page Template

Use this as a template for new pages that you create

```typescript
import { Details } from "@/components/generic/Details";
import { SafeAreaView, ScrollView, View } from "react-native";

export default function ExamplePage () {
  return (
    <SafeAreaView className="flex-1 bg-background">
      <ScrollView className="px-screen py-screenLg">
        <View className="pb-8 flex gap-12">
          {/* Your page here */}
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}
```

* Use bg-background to make the background something other than pure white/pure black
* Use SafeAreaView to avoid the notch/handlebar
* Use ScrollVew with horiznotal and vertical padding
* Use a View in side the ScrollView because ScrollView does not support css gap

v2

* Fixes scrollview height issue

```jsx
import { Details } from "@/components/generic/Details";
import { SafeAreaView, ScrollView, View } from "react-native";

<SafeAreaView className="flex-1">
  <ScrollView
    className="px-screen py-screenLg"
    keyboardDismissMode='interactive'
    contentContainerStyle={{ minHeight: '100%', paddingBottom: 32 }}
  >
    <View className="pb-8 flex gap-12">
      {/* Your page here */}
    </View>
  </ScrollView>
</SafeAreaView>

```

## Adding a new tab

How to create a new tab in the Tab Navigator

1. In the folder `app/content/tabs/`, add a new file `exampleTab.tsx` and add paste in this template

```typescript
import { Details } from "@/components/generic/Details";
import { SafeAreaView, ScrollView, View } from "react-native";

export default function ExampleTab () {
  return (
    <SafeAreaView className="flex-1 bg-background">
      <ScrollView className="px-screen py-screenLg">
        <View className="pb-16 flex gap-12">
          {/* Your page here */}
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}
```

2. Open `app/content/tabs/_layout.tsx`, add a  new Tab Screen for that screen

```typescript
<Tabs.Screen
  name="exampleTab"
  options={{
    title: 'Example',
    tabBarIcon: ({ color }) => <IconSymbol size={28} name="gear.circle.fill" color={color} />,
  }}
/> 
```

## Adding a new stack screen

How to add a route to the stack navigator. These pages with pop open with a back button

1. In the folder `app/content/`, add a new file `examplePage.tsx` and fill it with the new page template

```typescript
import { Details } from "@/components/generic/Details";
import { SafeAreaView, ScrollView, View } from "react-native";

export default function ExamplePage () {
  return (
    <SafeAreaView className="flex-1 bg-background">
      <ScrollView className="px-screen py-screenLg">
        <View className="pb-8 flex gap-12">
          {/* Your page here */}
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}
```

2. Open `app/content/_layout.tsx`, add a  new Stack Screen for that screen

```typescript
<Stack.Screen
  name='examplePage'
  options={{title: "Example Page"}}
  // To make it pop up as a modal, use this
  // options={{presentation: "modal", title: "Example Page"}}
/>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shipnative.gitbook.io/shipnative/other/adding-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.