Phase 2: React Native & Cross-Platform

View, Text, Image, ScrollView & FlatList

Intermediate ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Imagine you're building awesome creations with LEGOs – that's a lot like how we build apps! In coding, we have special LEGO bricks, called "components," that help us put things together on a phone screen.

First, there's the View component. Think of View as your basic, sturdy LEGO plate or a simple, empty brick. It's super important because it's where you put other LEGOs. It helps you group things, organize your build, and make sure everything is neatly arranged. But just like an empty brick, a View doesn't do much by itself; it just holds other pieces. Then we have Text. This is like a special LEGO brick that only has words printed on it, like a tiny sign. If you want to put any writing into your app, like a character's name or a score, you have to use a Text brick. You can't just draw words on any old brick! And for pictures, we have the Image component. This is like a LEGO piece that already has a cool picture printed on it, maybe a minifigure face or a map. These three — View, Text, and Image — are your essential starter kit for making anything appear on the screen.

Now, what happens if your LEGO creation gets super tall, like a skyscraper, but your table isn't big enough to see the whole thing all at once? That's where ScrollView comes in! ScrollView is like a special, rotating display stand for your LEGO build. You can spin the stand up or down to see the very top or the very bottom of your skyscraper, even if it's much taller than your table. It always shows all of your pieces, it just lets you move them around to view them. This is perfect for something like a long story or a list of game rules that doesn't go on forever but might be longer than your phone screen.

But what if you're building a huge LEGO city, and you need to put hundreds, or even thousands, of tiny, similar houses or cars in a long line? Putting all of them on the table at once would be too much! Your table would be overflowing, and it would be super slow to build. That's when you use FlatList. FlatList is like a super smart LEGO conveyor belt. It only actually builds and shows the few houses or cars that are right in front of you on the belt. As you "scroll" (like moving the belt), it cleverly takes the houses that rolled off one end and puts new ones from further down the list onto the other end, without ever building everything at once. It's incredibly efficient for really long lists of similar things, like a list of all your friends in a game or every single song in your music library.

So, when you build your own apps, you'll know exactly which LEGO pieces to grab! You can use View to organize your layout, Text for all your words, and Image for your pictures. And when your content gets too big, ScrollView will let people explore everything, while FlatList will make sure your app runs smoothly even with super long lists of items.

At the heart of every React Native application are a handful of core components that act as the foundational building blocks for your user interface. Think of View as the equivalent of a div in web development – it's your primary container for layout, grouping other components, and applying styles. It doesn't display anything itself but is crucial for structuring your UI. Text is your go-to for displaying any text; unlike web, all textual content in React Native must be wrapped within a <Text> component. This allows the framework to apply native text rendering and styling efficiently. For visual content, the Image component handles displaying pictures, whether they are local assets bundled with your app or fetched from a network URL. Mastering these three components gives you the basic tools to render static content on the screen.

As your content grows, you'll inevitably need to handle scenarios where information exceeds the screen's available space. This is where ScrollView and FlatList come into play. ScrollView is perfect for finite, relatively short amounts of content that might scroll, like a settings page or a blog post. It renders all its children at once, making it straightforward to use, but potentially inefficient for very long lists. For dynamic, potentially infinite, and truly long lists of data, FlatList is the hero. It's built for performance, efficiently rendering only the items currently visible on screen (a process called virtualization), which significantly reduces memory usage and improves rendering speed for large datasets. You provide FlatList with your data and a function to render each item, and it handles the rest.

Understanding View, Text, Image, ScrollView, and FlatList is non-negotiable for any React Native developer. They are the primitives you'll combine and style using the style prop (often with StyleSheet.create) to construct virtually any mobile UI. While they may seem simple individually, their effective combination and understanding of their nuances, especially the performance implications between ScrollView and FlatList, are key to building robust, performant, and user-friendly cross-platform applications.

Key Takeaways

  • View is the fundamental container for layout and styling, analogous to a web div.
  • All text in React Native must be wrapped within a Text component.
  • Use Image to display pictures from local assets or network URLs.
  • ScrollView is for finite, short lists; it renders all content at once.
  • FlatList is for long, dynamic lists, providing performance benefits through virtualization.

Code Example

javascript
Preview

How this code works

This code example demonstrates how to build a basic, scrollable user interface using several core React Native components. It combines different display elements into a single screen, allowing more content than initially visible to be accessed by swiping.

The main container is a ScrollView, which enables its children to be scrollable if their total height exceeds the screen's available space. It's styled with flex: 1 to ensure it expands and fills the entire screen, a crucial step beginners often miss for ScrollView to function correctly. Inside, View components act as flexible containers, grouping other elements like the header text and image, or the main body text. The Text component is used to display various pieces of static text, with different style props to change their appearance (like size, weight, or alignment). An Image component displays a picture, using the source={{ uri: '...' }} property to load an image from a web address, and style to set its dimensions.

Related Articles

Hand-picked reads to go deeper on core components & styling.

Back to Mobile Developer Roadmap