How it works...

In step 1, we included the dependencies of our component. In this case, we used View, which is a container. If you're familiar with web development, View is similar to div. We could add more Views inside other Views, Texts, Lists, and any other custom component that we create or import from a third-party library.

If you're familiar with React you'll notice that, this is a stateless component, which means it doesn't have any state; it's a pure function and doesn't support any of the life cycle methods.

We're defining a name constant in the component, but in real-world applications this data should come from the props. In the return, we're defining the JavaScript XML (JSX) that we're going to need to render our component, along with a reference to the styles.

Each component has a attribute called style. This property receives an object with all of the styles that we want to apply to the given component. Styles are not inherited (except for the Text component) by the child components, which means we need to set individual styles for each component.

In step 3, we defined the styles for our component. We're using the StyleSheet API to create all of our styles. We could have used a plain object containing the styles, but by using the StyleSheet API instead of an object, we gain some performance optimizations, as the styles will be reused for every renderer, as opposed to creating an object every time the render method gets executed.