Create the Header Component

Define the Header Component

Let's start by creating the Header component.

• From VS Code, open the folder for the basic demo app we just created in the Setup module.
• Within the src folder create a folder called components. This folder may already exist in the template, in which case delete its contents.
• Within components create a file called Header.tsx, as follows:

src/
├── components/
│   └── Header.tsx
└── App.tsx

• Open Header.tsx and import React (see code below). We need to import React, as the JSX we will write will be converted into React Components using JSX transformer.
• Import the components needed from react-native in order to build our header. We will need a StyleSheet, a Text component, and a View component.

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

You may be wondering why StyleSheet, Text, and View are wrapped with curly braces. This is because they are named exports. You'll learn more about this in Part 2.

• Declare a functional component called "Header" - you can do this as an arrow function or by declaring it as a function (We use arrow functions throughout this guide).

const Header = () => {
  // or function Header() {
};

• Return a View component, that contains a Text component with the welcome message, “Welcome to Vega!”

const Header = () => {
  return (
    <View>
      <Text>Welcome to Vega!</Text>
    </View>
  );
};

We wrap the Text component in a View component, because it makes it easier to position on the screen. The Text componenet does not use the FlexBox layout system that View does (see here for details). Wrapping it in a View allows us to position the Text component where we want, using the FlexBox layout system.

Finally we need to export our component. You could export your component when you define it: export const MyComponent = () => {};. However, default exports are usually used when the exported component is only going to be imported once, or if a file exports one thing (further reading).

• Add the export statement below:

export default Header;

Our Header.tsxcode should now look like this:

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Header = () => {
  return (
    <View>
      <Text>Welcome to Vega!</Text>
    </View>
  );
};

export default Header;

Add Styling

Now that we have our first component we can add styling to it.

StyleSheet is an abstraction similar to CSS StyleSheets. Unlike CSS, you can't cascade a style across elements of the same type. For example, if you have a <View> element in separate files that have the same styling, you have to create a StyleSheet and define the style in each file.

• After the Header arrow function, create a new StyleSheet called styles with headerContainer and headerText sections.

const styles = StyleSheet.create({
  headerContainer: {
    padding: 10,
    alignItems: 'center',
    backgroundColor: '#232F3E',
    width: '100%',
  },
  headerText: {
    fontSize: 50,
    fontWeight: '700',
    color: '#FF9900',
  },
});

The headerContainer style centers the text component and fills the width of the screen. The headerText style changes the size, weight, and color of the text. Besides a hex code, you can also set the color to an RGB value (e.g. `rgb(50, 50, 50)`), or a named color (e.g. 'gray').

• Add the headerContainer style to the View element, and the headerText style to the Text element.

<View style={styles.headerContainer}>
  <Text style={styles.headerText}>Welcome to Vega!</Text>
</View>;

Our final Header.tsx code should look like this:

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Header = () => {
  return (
    <View style={styles.headerContainer}>
      <Text style={styles.headerText}>Welcome to Vega!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    padding: 10,
    alignItems: 'center',
    backgroundColor: '#232F3E',
    width: '100%',
  },
  headerText: {
    fontSize: 50,
    fontWeight: '700',
    color: '#FF9900',
  },
});

export default Header;

Render the Header Component

In order to render our Header component, we need to import it into App.tsx.

• In App.tsx modify the imports to import the Header component instead of the link.
• Remove the Text, ImageBackground and Image imports.
• Render the Header in a View with the style prop container.
• Modify the StyleSheet to only have the container stying which is just giving our app a nicer background color.

Our App.tsx should look like this:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Header from './components/Header';

export const App = () => {
  return (
    <View style={styles.container}>
      <Header />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#232F3E',
  },
});

• Now head over to the simulator to see what our header looks like!

The header should automatically show up due to Fast Refresh, but if it doesn't, you can 'manually' refresh your app.

• If you are using the VegaStudio, use the Vega Extension to press the play button next to your app name.
• If you are using the CLI, in the terminal running the metro server, press 'r'.

Next