---

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 Workspace Setup guide.

Step 1: Create an App

Now, let's get started. Navigate to your terminal in order to create a new project named "my-new-app". Once there, run the following command:

npx github:uhc-tech/abyss-app my-new-app

Step 2: Navigate to Project Directory

Next, navigate into the my-new-app project directory by running the command below:

cd my-new-app

Step 3: Run Abyss

Finally, run the following command in order to get localhost running:

npm run mobile

Once you see the screen shown below, you are now up and running with Abyss!

() => {
  const Container = styled('ScrollView', {
    height: '90%',
  });

  const theme = createTheme('uhc');

  const links = [
    {
      heading: 'About Us',
      paragraph: 'Learn more about the Abyss library',
      url: 'https://abyss.uhc.com/web/about',
    },
    {
      heading: 'Components',
      paragraph: 'View the full list of components inside Abyss Mobile',
      url: 'https://abyss.uhc.com/mobile/ui/button',
    },
    {
      heading: 'Tokens',
      paragraph: 'View our palette of color tokens',
      url: 'https://abyss.uhc.com/mobile/brand/uhc/colors/',
    },
    {
      heading: 'Custom Styling',
      paragraph: 'Learn how to customize Abyss components',
      url: 'https://abyss.uhc.com/mobile/developers/style-customization',
    },
    {
      heading: 'Navigation',
      paragraph:
        'Learn to handle moving between screens inside your application',
      url: 'https://abyss.uhc.com/mobile/tools/create-bottom-tab-navigator',
    },
    {
      heading: 'Support',
      paragraph: 'Need help? Visit our support page',
      url: 'https://abyss.uhc.com/mobile/contact-us',
    },
  ];

  return (
    <ThemeProvider theme={theme}>
      <Container contentContainerStyle={{ marginTop: 24 }}>
        <View
          style={{
            alignItems: 'center',
            paddingHorizontal: 16,
            paddingTop: 16,
          }}
        >
          <Image
            accessible
            aria-label="Abyss"
            role="img"
            style={{
              width: 150,
              height: 150,
              opacity: 0.8,
            }}
            source={'/img/logo.svg'}
          />
          <Heading offset={5} style={{ margin: 8 }} role="heading">
            Welcome to Abyss
          </Heading>
          <Text style={{ marginHorizontal: '$semantic.spacing.sm' }}>
            Edit{' '}
            <Text style={{ fontWeight: '$core.font-weight.bold' }}>
              App.tsx
            </Text>{' '}
            to change this screen and then come back to see your edits.
          </Text>
          <Layout.Group
            space={16}
            style={{ marginVertical: '$semantic.spacing.lg' }}
          >
            <Brandmark
              brand="uhc"
              affiliate="uhc"
              variant="lockup"
              color="blue"
              size={80}
            />
            <Brandmark
              brand="uhg"
              affiliate="uhg"
              variant="lockup"
              color="blue"
              size={80}
            />
            <Brandmark
              brand="optum"
              affiliate="optum"
              variant="lockup"
              color="orange"
              size={80}
            />
          </Layout.Group>
        </View>
        <CellGroup>
          {links.map((link) => {
            return (
              <Cell
                style={{ backgroundColor: 'transparent' }}
                key={link.heading}
                heading={link.heading}
                paragraph={link.paragraph}
                onPress={() => window.open(link.url)}
              />
            );
          })}
        </CellGroup>
      </Container>
    </ThemeProvider>
  );
};

Great job, you have successfully created an abyss app!