Thuta Learning
Search
BasicMobile Developmentintermediate

Core Components (View, Text, Image, ScrollView)

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

  • Understand Core Components (View, Text, Image, ScrollView), no need to be intimidated
  • Write code yourself and run it on Expo Go
  • Apply this concept immediately in a real app project

Let's think about this for a moment

View is a layout container (similar to HTML's <div>) — used to group and arrange child components. Text is the only component for displaying text content (text styling like font size/color has to happen inside Text). Image is for displaying pictures and accepts either a local file (require) or a remote URL (uri). ScrollView is a container that lets content scroll when it exceeds the screen height — needed whenever there's a lot of content.

Let's connect this to a real scenario

When building a profile screen, it's common to put an Image (profile photo) and Text (name, bio) inside an outer View, with the rest of the content inside a ScrollView — since screen sizes vary across phones, if the content is long and ScrollView is missing, whatever falls below the fold simply won't be visible.

Code Example

javascript
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';

export default function ProfileScreen() {
  return (
    <ScrollView style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/avatar.png' }}
        style={styles.avatar}
      />
      <Text style={styles.name}>Mya Mya</Text>
      <Text>Software developer, learning React Native.</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  avatar: { width: 100, height: 100, borderRadius: 50 },
  name: { fontSize: 20, fontWeight: 'bold', marginTop: 8 },
});
You should see
You'll be able to lay out a profile screen so the avatar image, name, and bio are scrollable.

5-Minute Try-It

Combine View, Text, Image, and ScrollView to build your own simple profile screen.

A Quick Heads-Up

If you don't set width/height in Image's style, the picture might not show up at all (there's no default size) — a local file can sometimes auto-size, but a remote URI always needs an explicit width/height.

Easy traps

  • Mixing up local file (require) and remote URL (uri object) syntax for Image source
  • Defaulting to ScrollView even for short content, causing unnecessary nesting

Now Try It Yourself

Combine View, Text, Image, and ScrollView to build your own simple profile screen.

You'll know it worked when: You'll be able to lay out a profile screen so the avatar image, name, and bio are scrollable.

Core Components (View, Text, Image, ScrollView) | Thuta Learning