> For the complete documentation index, see [llms.txt](https://shipnative.gitbook.io/shipnative/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shipnative.gitbook.io/shipnative/other/adding-pages.md).

# 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"}}
/>
```