Complete React Native Tutorial #2 - Text, View & Image Components

 

Building Your First React Native Screen: Components & Styling

Diving into React Native can feel familiar if you know React, but there are some key differences. In this guide, we break down the core concepts of building and styling a homepage screen using native components.

text

The Building Blocks of a React Native App

Just like React for the web, React Native applications are built using components. These components generally fall into three categories:

• Full Page Components: Represent entire screens, like a home screen.
• Custom Components: Reusable UI pieces, like a custom button or card.
• Built-in Native Components: Provided by React Native, such as View and Text.

The crucial difference from web development? We don't use HTML tags. Instead, we use native components that translate to platform-specific elements (like iOS or Android views) at runtime.

Core Native Components in Action

Let's explore the fundamental components you'll use in almost every screen.

1. The Text Component

Any time you need to display text, you must wrap it in a <Text> component. Remember to import it first!

2. The View Component

Think of a <View> as a <div>. It's a container used to group other components, structure content, and manage layout using Flexbox (which is set to column by default).

3. The Image Component

To display images, use the <Image> component. A common gotcha: the prop is called source, not src. You can reference a web-based image with a URI or import a local asset directly.

Styling Your Components

There are several ways to style a React Native app, including libraries like Native Wind or Styled Components. For this example, we use the built-in StyleSheet API.

We create a stylesheet object using StyleSheet.create({}). Each property in this object (e.g., container) acts like a CSS class containing style rules written in camelCase (e.g., backgroundColor, fontWeight).

You apply these styles to a component using the style prop: style={styles.container}.

Combining Style Sources

You can combine multiple style sources by passing an array to the style prop. The styles are applied in order, so later styles can override earlier ones.

<Text style={[styles.title, { color: 'purple' }]}>My Text</Text>

Bringing It All Together

By combining these core components—View, Text, and Image—with the power of the StyleSheet API, you have the essential tools to start building visually appealing and structurally sound screens for your mobile application.