Skip to main content

Import Components

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: Open App.tsx​

In Visual Studio Code, open my-new-app project. From here, navigate into products/mobile, and open the App.tsx file.

└── products
    └── mobile
        └── App.tsx

Step 2: Import React​

Anytime you’re using a react component, make sure to import the following dependency at the top:

import React from 'react';

Step 3: Importing Component​

Depending on the project requirements, the @uhg-abyss/mobile/ui, @uhg-abyss/mobile/hooks, and @uhg-abyss/mobile/tools libraries have different components in order to assemble products quickly.

There are three ways to import resources: Directly from one of the libraries above, from @uhg-abyss/mobile, or from the file for that resource @uhg-abyss/mobile/ui/ComponentName

Let's start with the Card component. A Card acts as a container used to display content related to a single subject.

You can access the documentation for the Card through the Abyss Portal. The import statement for a card can be any of the following:

import { Card } from '@uhg-abyss/mobile';
import { Card } from '@uhg-abyss/mobile/ui';
import { Card } from '@uhg-abyss/mobile/ui/Card';

In App.tsx, within the tsx of App functional component, insert the following code:

<Card style={{ padding: 16, alignItems: 'center' }}>
  <Heading>Hello tutorial</Heading>
  <Text>We did it!</Text>
</Card>

Step 4: Verifying Your Code​

Your code in App.tsx should now look similar to this:

import React from 'react';
import { Image, SafeAreaView, ScrollView, View } from 'react-native';
import {
  createTheme,
  ThemeProvider,
  Layout,
  Text,
  Card,
  Heading,
} from '@uhg-abyss/mobile';


const theme = createTheme('uhc');


function App(): React.JSX.Element {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView>
        <ScrollView>
          <View style={{ alignItems: 'center', padding: 16 }}>
            <Image
              accessible
              accessibilityLabel="Abyss Logo"
              style={{
                width: 150,
                height: 150,
                opacity: 0.8,
              }}
              source={require('./assets/Abyss_Logo.png')}
            />
            <Text
              style={{
                marginVertical: '$semantic.spacing.lg',
                fontWeight: '$core.font-weight.bold',
                fontSize: '$core.font-size.h.60',
              }}
            >
              Welcome to Abyss
            </Text>
            <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.Space />
            <Card style={{ padding: 16, alignItems: 'center' }}>
              <Heading>Hello tutorial</Heading>
              <Text>We did it!</Text>
            </Card>
          </View>
        </ScrollView>
      </SafeAreaView>
    </ThemeProvider>
  );
}


export default App;

Great job, you have successfully imported components!

Table of Contents