← React Native Course2 / 16

Core Components

There is no div or span — React Native gives you a set of native building blocks. Meet View, Text, Image, and the interactive components you assemble every screen from.

Ad 728×90

View and Text: the foundation

Why: View is the fundamental container — the native equivalent of a div — and it is what you nest and style to build layout. Text renders text and, unlike the web, ALL text must live inside a Text component; you cannot put a bare string in a View. Text can nest for inline styling.

import { View, Text } from 'react-native'

function Card() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
        Title <Text style={{ color: 'gray' }}>(subtitle)</Text>
      </Text>
    </View>
  )
}

Images

Why: Image displays pictures from the network or bundled assets. A network image NEEDS an explicit width and height (it has no intrinsic size until loaded). Local images use require() and are sized automatically. ImageBackground wraps content over an image, like a CSS background.

import { Image } from 'react-native'

// Network image — width/height are required
<Image
  source={{ uri: 'https://picsum.photos/200' }}
  style={{ width: 200, height: 200, borderRadius: 12 }}
/>

// Bundled local image — sized automatically
<Image source={require('./assets/logo.png')} />

SafeAreaView and StatusBar

Why: phones have notches, rounded corners, and the status bar — content can render under them. SafeAreaView insets your UI into the visible area automatically. StatusBar controls the clock/battery bar style. Wrap your screens so nothing hides behind the hardware.

import { SafeAreaView, StatusBar, Text } from 'react-native'

export default function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" />
      <Text>Safely below the notch and status bar</Text>
    </SafeAreaView>
  )
}

Interactive components

Why: the common building blocks for interaction. Button is the quick default. Switch is an on/off toggle (a controlled component — you manage its value). ActivityIndicator is a spinner for loading states. Modal slides content over the screen. You compose screens from these.

import { useState } from 'react'
import { View, Switch, ActivityIndicator } from 'react-native'

function Controls() {
  const [on, setOn] = useState(false)
  return (
    <View>
      <Switch value={on} onValueChange={setOn} />
      {on && <ActivityIndicator size="large" />}
    </View>
  )
}

View and Text: the foundation

import { View, Text } from 'react-native'

function Card() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
        Title <Text style={{ color: 'gray' }}>(subtitle)</Text>
      </Text>
    </View>
  )
}

Images

import { Image } from 'react-native'

// Network image — width/height are required
<Image
  source={{ uri: 'https://picsum.photos/200' }}
  style={{ width: 200, height: 200, borderRadius: 12 }}
/>

// Bundled local image — sized automatically
<Image source={require('./assets/logo.png')} />

SafeAreaView and StatusBar

import { SafeAreaView, StatusBar, Text } from 'react-native'

export default function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" />
      <Text>Safely below the notch and status bar</Text>
    </SafeAreaView>
  )
}

Interactive components

import { useState } from 'react'
import { View, Switch, ActivityIndicator } from 'react-native'

function Controls() {
  const [on, setOn] = useState(false)
  return (
    <View>
      <Switch value={on} onValueChange={setOn} />
      {on && <ActivityIndicator size="large" />}
    </View>
  )
}