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. 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

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

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

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>
  )
}

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

<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

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>
  )
}

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

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