React Native provides a set of core components that map to native UI elements. There is no HTML — everything is a component.

View — The Container

View is like a <div>. It holds other components and handles layout:

  import { View } from 'react-native';

<View style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
    <Text>Content inside a View</Text>
</View>

Text — Displaying Text

All text must be wrapped in <Text>. Nesting applies styles:

  import { Text } from 'react-native';

<Text style={{ fontSize: 18 }}>
    Hello, <Text style={{ fontWeight: 'bold' }}>World</Text>!
</Text>

Image 

  import { Image } from 'react-native';

// Local asset
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Remote URL
<Image
    source={{ uri: 'https://example.com/photo.jpg' }}
    style={{ width: 200, height: 200 }}
    resizeMode="cover"
/>

ScrollView

For scrollable content that doesn’t need virtualization:

  import { ScrollView } from 'react-native';

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

Use FlatList for long lists (covered later).

Touchable Components

Handle user taps:

  import { Pressable, Text } from 'react-native';

<Pressable
    onPress={() => console.log('Pressed!')}
    style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }]}
>
    <Text>Tap Me</Text>
</Pressable>

Alternatives: TouchableOpacity, TouchableHighlight.

SafeAreaView

Avoid notches and status bars:

  import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView style={{ flex: 1 }}>
    <Text>Content safe from screen edges</Text>
</SafeAreaView>

Install with: npx expo install react-native-safe-area-context

Next: style components with StyleSheet and Flexbox.