iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Core Components

By · Reviewed & last updated · Part of React Native Tutorial

React Native ships a small core set of primitives that map to native iOS / Android views. Build everything else by composing them — just like HTML elements, but native.

The ones you’ll use daily

EXAMPLE
import { View, Text, Image, ScrollView, FlatList,
         TextInput, Pressable, SafeAreaView } from 'react-native';

export default function App() {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <ScrollView contentContainerStyle={{ padding: 16 }}>
                <Text style={{ fontSize: 22, fontWeight: '600' }}>Hello, RN</Text>
                <Image source={{ uri: 'https://picsum.photos/300' }}
                       style={{ width: 300, height: 200, marginVertical: 8 }} />
                <Pressable onPress={() => alert('Tap')}
                           style={{ padding: 12, backgroundColor: '#04AA6D' }}>
                    <Text style={{ color: 'white' }}>Tap me</Text>
                </Pressable>
            </ScrollView>
        </SafeAreaView>
    );
}

Why it matters

Wrap screens in SafeAreaView so content respects the notch / status bar. Use FlatList for long lists — never ScrollView + .map().

Tip: Open the editor with Try it Yourself » to tweak the snippet, then sit the quiz at the bottom of the page.

Example

Example
// View, Text, Image, ScrollView, FlatList, TextInput,
// Pressable, Modal, ActivityIndicator, SafeAreaView, StatusBar.
Try it Yourself »

Discussion

Loading…