---

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.

---

Step 1: Create a Styled Screen

In Visual Studio Code, open the my-new-app project. From here, navigate to products/mobile/src/screens and create a new folder named StyledScreen. Within this new folder, create two new files named index.ts and StyledScreen.tsx.

products
└── mobile
    └── src
        └── screens
            └── StyledScreen
                ├── index.ts
                └── StyledScreen.tsx

Step 2: Creating Styled Components

You can use the styled tool to style existing components or create new styled components. To learn more, check out our styled function.

In your StyledScreen.tsx file, add the following import statements:

import React from 'react';
import { IconBrand, Card, Text, styled } from '@uhg-abyss/mobile';

We will create an information box to demonstrate how to work with styled-components.

After your import statements, insert the following code:

const StyledCard = styled(Card, {
  padding: '$semantic.spacing.sm',
  flexDirection: 'row',
  alignItems: 'center',
});

const StyledText = styled('Text', {
  fontWeight: '$semantic.font-weight.semibold',
});

Step 3: Rendering Styled Components

This component uses the StyledCard, and StyledText components we created previously. There are other features available in the styled function to customize and edit your components to best fit your product's custom designs.

In the StyledScreen.tsx file, add the following code to your StyledScreen component:

export const StyledScreen = () => {
  return (
    <StyledCard color="$semantic.color.surface.container.emphasis.3">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};

Step 4: Viewing Styled Components

At the end of this tutorial, the code in your StyledScreen.tsx file should look like this:

import React from 'react';
import { styled, IconBrand, Card, Text } from '@uhg-abyss/mobile';

const StyledCard = styled(Card, {
  padding: '$semantic.spacing.sm',
  flexDirection: 'row',
  alignItems: 'center',
});

const StyledText = styled('Text', {
  fontWeight: '$$semantic.font-weight.semibold',
});

const StyledScreen = () => {
  return (
    <StyledCard color="$semantic.color.surface.container.emphasis.3">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};

On your device, your StyledScreen should look like this:

Great job, you have successfully styled components!