---

Note:
We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our Contact Page.

---

Before starting, be sure to complete the Create Abyss App tutorial.

Step 1: Create New Files

In Visual Studio Code, open my-new-app project. From here, navigate into products/mobile/src/navigation, and create a new file, named "MyPlanNavigator.tsx".

Then, navigate to products/mobile/src/screens, and create a new folder named MyPlan. Within this folder, we'll be creating 3 files: "MyPlanScreen.tsx", "CoverageScreen.tsx", and "index.ts".

Your folder structure should look like this:

└── products
    └── mobile
        ├── src
        |   ├── navigation
        |   |   ├── HomeNavigator.tsx
        |   |   ├── MenuNavigator.tsx
        |   |   └── MyPlanNavigator.tsx
        |   ├── screens
        |   |   ├── Home
        |   |   ├── Menu
        |   |   ├── MyPlan
        |   |   |   ├── CoverageScreen.tsx
        |   |   |   ├── index.ts
        |   |   |   └── MyPlanScreen.tsx
        └── App.tsx
        └── package.json

Step 2: Create MyPlan Screen

Lets create a screen! We'll add a Plan Coverage card.

In "MyPlanScreen.tsx", insert the following code:

import React from 'react';
import { View } from 'react-native';
import { Card, Cell, CellGroup, Heading, IconBrand } from '@uhg-abyss/mobile';

export const MyPlanScreen = ({ navigation, route }) => {
  return (
    <View style={{ padding: 16 }}>
      <Card>
        <Heading
          offset={4}
          style={{
            paddingLeft: '$semantic.spacing.lg',
            marginVertical: '$semantic.spacing.lg',
          }}
        >
          Plan Coverage
        </Heading>
        <CellGroup>
          <Cell
            icon={<IconBrand icon="heart" size="$xs" />}
            heading="Coverage & Benefits"
            onPress={() =>
              navigation.navigate('Coverage', {
                benefits: ['Medical', 'Dental', 'Transportation'],
              })
            }
          />
        </CellGroup>
      </Card>
    </View>
  );
};

Then in index.ts , insert the following export command:

// Exporting MyPlanScreen allows us to import and use MyPlanScreen in the Navigator
export { MyPlanScreen } from './MyPlanScreen';

In the code above, we have a Cell that navigates to another screen called Coverage. The Coverage screen takes an array of benefits as a parameter. Let's create that screen.

Step 3: Create Coverage Screen

import React from 'react';
import { View } from 'react-native';
import { Card, Cell, CellGroup, Heading } from '@uhg-abyss/mobile';

export const CoverageScreen = ({ navigation, route }) => {
  // The benefits array from MyPlanScreen
  const { benefits } = route.params;
  return (
    <View style={{ padding: 16 }}>
      <Card>
        <Heading
          offset={4}
          style={{
            paddingLeft: '$semantic.spacing.lg',
            marginVertical: '$semantic.spacing.lg',
          }}
        >
          Coverage & Benefits
        </Heading>
        <CellGroup>
          {benefits.map((benefit) => {
            return <Cell key={benefit} heading={benefit} onPress={() => {}} />;
          })}
        </CellGroup>
      </Card>
    </View>
  );
};

// Exporting MyPlanScreen allows us to import and use MyPlanScreen in the Navigator
export { MyPlanScreen } from './MyPlanScreen';

Then in index.ts , add the screen to the list of exports:

export { CoverageScreen } from './CoverageScreen';
export { MyPlanScreen } from './MyPlanScreen';

Step 4: Create a Stack Navigator

Next, we will create the stack navigator. In MyPlanNavigator.tsx, insert the following code:

import React from 'react';
import { Pressable } from 'react-native';
import { createStackNavigator, IconSymbol } from '@uhg-abyss/mobile';
import { MyPlanScreen, CoverageScreen } from '@/screens/MyPlan';

const MyPlanStack = createStackNavigator();

export const MyPlanNavigator = () => {
  return (
    <MyPlanStack.Navigator screenOptions={{ headerShown: true }}>
      <MyPlanStack.Screen
        name="MyPlan"
        component={MyPlanScreen}
        options={{ headerTitle: 'My Plan', headerTitleAlign: 'left' }}
      />
      <MyPlanStack.Screen
        name="Coverage"
        component={CoverageScreen}
        options={{
          headerTitle: 'Plan Coverage',
          headerTitleAlign: 'center',
          headerLeft: ({ goBack }) => (
            <Pressable onPress={goBack}>
              <IconSymbol
                icon="chevron_left"
                color="$button.color.icon.primary"
              />
            </Pressable>
          ),
        }}
      />
    </MyPlanStack.Navigator>
  );
};

Step 5: Add MyPlan Tab

Next, we will add the MyPlan Stack Navigator, to the main tab bar.

Navigate into products/mobile/App.tsx. There should already be two existing Tab.Screen components, representing the Home and Menu tabs. Let's place a new Tab.Screen in between the existing tabs so that the My Plan tab shows 2nd on the tab bar.

First import the MyPlanNavigator.

import { MyPlanNavigator } from '@/navigation/MyPlanNavigator';

Then add the MyPlan tab

...
<Tab.Screen
  options={{
    headerTitle: 'Home',
    tabBarLabel: 'Home',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="home"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="HomeTab"
  component={HomeNavigator}
/>
<Tab.Screen
  options={{
    headerTitle: 'My Plan',
    tabBarLabel: 'My Plan',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="my_plan"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="MyPlanTab"
  component={MyPlanNavigator}
/>
<Tab.Screen
  options={{
    headerTitle: 'Menu',
    tabBarLabel: 'Menu',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="menu"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="MenuTab"
  component={MenuNavigator}
/>
...

Step 6: Create Navigation Types

Navigate to products/mobile/src/navigation and open "navigation.ts".

Let's create a new type to represent the two screens' parameters. The MyPlan screen has no parameters and the Coverage screen has a benefits array of strings.

In "navigation.ts", insert the following code.

type MyPlanTabParamList = {
  MyPlan: undefined;
  Coverage: { benefits: string[] };
};

Now, we can create a type for the navigation and route props of each screen.

In "navigation.ts", insert the following code.

export type MyPlanTabScreenProps<T extends keyof MyPlanTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<MyPlanTabParamList, T>,
    RootStackScreenProps<keyof RootStackParamList>
  >;

Next, let's navigate back to "MyPlanScreen.tsx" and add the MyPlanTabScreenProps type in the function's parameter.

import { MyPlanTabScreenProps } from '@/types/navigation';

export const MyPlanScreen = ({
  navigation,
  route,
}: MyPlanTabScreenProps<'MyPlan'>) => {
  // rest of the code
};

We can do the same thing in "Coverage.tsx".

import { MyPlanTabScreenProps } from '@/types/navigation';

export const CoverageScreen = ({
  navigation,
  route,
}: MyPlanTabScreenProps<'Coverage'>) => {
  // rest of the code
};

Great job, you have successfully completed page routing!