React Native Core Components

React Native gives you a set of ready-made building blocks called core components. Every screen you build is a combination of these components. Think of them as LEGO pieces — each piece has a clear purpose, and you snap them together to create a complete UI.

The Component Map

React Native Components → What They Become on the Phone
─────────────────────────────────────────────────────────
<View>        → Container / Box / Div equivalent
<Text>        → Any text on screen
<Image>       → Photos, icons, illustrations
<TextInput>   → Text field where users type
<Button>      → Tappable button
<TouchableOpacity> → Custom tappable area
<ScrollView>  → Scrollable container
<FlatList>    → Efficient scrollable list
<Modal>       → Popup overlay screen
<ActivityIndicator> → Loading spinner

View

View is the most fundamental component. It creates a rectangular box on screen. Everything you build lives inside a View. A View can contain other components including other Views.

<View style={{ padding: 20, backgroundColor: '#f0f0f0' }}>
  <Text>I am inside a View</Text>
</View>

Think of View as a cardboard box. You put things inside it. You can put boxes inside other boxes. The box itself is invisible unless you give it a background color or border.

Screen
└── View (outer box)
    ├── View (header area)
    │   └── Text ("My App")
    ├── View (content area)
    │   ├── Text ("Item 1")
    │   └── Text ("Item 2")
    └── View (footer area)
        └── Text ("Footer")

Text

All text in React Native must live inside a Text component. If you write raw text outside a Text tag, the app will throw an error. This rule is strict and different from web development.

<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
  This is a heading
</Text>

<Text style={{ fontSize: 14, color: '#666' }}>
  This is smaller body text.
</Text>

Nesting Text

You can nest Text inside Text to apply different styles to parts of a sentence.

<Text>
  Normal text with <Text style={{ fontWeight: 'bold' }}>bold words</Text> inside.
</Text>

Image

Image displays pictures. You can load images from your local project files or from a URL on the internet. Always set a width and height on an Image — without those, the image will not appear.

{/* Local image from your assets folder */}
<Image
  source={require('./assets/logo.png')}
  style={{ width: 100, height: 100 }}
/>

{/* Image from the internet */}
<Image
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ width: 200, height: 150 }}
/>

TextInput

TextInput creates a field where the user can type. Use it for search boxes, login forms, and any input that needs text from the user.

<TextInput
  placeholder="Type your name here"
  style={{
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 8,
  }}
/>

┌─────────────────────────────┐
│  Type your name here        │  ← TextInput component
└─────────────────────────────┘
  ↑ borderWidth: 1 creates the border line

Button

Button creates a simple tappable button. It uses the platform's default button style — which looks different on Android versus iOS.

<Button
  title="Click Me"
  onPress={() => alert('Button pressed!')}
  color="#007AFF"
/>

TouchableOpacity

TouchableOpacity lets you make any component tappable. When the user taps it, the element dims slightly to show feedback. Use this when you want a custom-looking button rather than the default Button style.

<TouchableOpacity
  onPress={() => alert('Tapped!')}
  style={{ backgroundColor: '#007AFF', padding: 12, borderRadius: 8 }}
>
  <Text style={{ color: 'white', textAlign: 'center' }}>Custom Button</Text>
</TouchableOpacity>

Before Tap          After Tap
┌──────────────┐    ┌──────────────┐
│ Custom Button│    │ Custom Button│  ← dims (opacity drops)
│  (full color)│    │  (faded)     │
└──────────────┘    └──────────────┘

ScrollView

ScrollView makes its content scrollable when it does not fit on screen. Wrap a group of components in ScrollView to allow the user to scroll through them.

<ScrollView>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
  {/* ... many more items */}
</ScrollView>

Use ScrollView for short lists. For very long lists (hundreds of items), use FlatList instead. FlatList only renders items visible on screen, which makes it much more efficient.

ActivityIndicator

ActivityIndicator shows a spinning loading circle. Display it while your app fetches data from the internet so users know something is happening.

<ActivityIndicator size="large" color="#007AFF" />

Putting It Together — A Simple Profile Card

<View style={{ padding: 20, alignItems: 'center' }}>
  <Image
    source={{ uri: 'https://example.com/avatar.jpg' }}
    style={{ width: 80, height: 80, borderRadius: 40 }}
  />
  <Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 10 }}>
    Jane Doe
  </Text>
  <Text style={{ color: '#666' }}>React Native Developer</Text>
  <TouchableOpacity style={{ backgroundColor: '#007AFF', padding: 10, marginTop: 16, borderRadius: 8 }}>
    <Text style={{ color: 'white' }}>Follow</Text>
  </TouchableOpacity>
</View>

Result on Screen:
┌──────────────────────────┐
│         [Photo]          │
│        Jane Doe          │
│  React Native Developer  │
│      ┌────────┐          │
│      │ Follow │          │
│      └────────┘          │
└──────────────────────────┘

Summary

React Native's core components replace the HTML tags you know from web development. View is your container. Text holds all words. Image shows pictures. TouchableOpacity makes anything tappable. ScrollView handles overflow content. These seven components build the majority of any mobile app screen.

Previous lessons
Back to courses
Next lessons

Leave a Comment