Core components.

What are the core components?

React Native ships a set of primitive components that map to native views: View for layout containers, Text for all text, Image for pictures, ScrollView for scrollable content, and inputs like TextInput and Pressable. These are the vocabulary you build every screen from.

Why it matters

You cannot build a UI without knowing the primitives, just as you cannot write HTML without knowing its tags. Each core component has native behavior and props that differ from the web. Mastering them is what makes layout and interaction feel natural instead of a fight.

What to learn

• View as the layout container
• Text and that text must be inside it
• Image and handling sources and sizing
• ScrollView versus a list for long content
• TextInput for forms
• Pressable and touchable components
• SafeAreaView for notches

Common pitfall

Using ScrollView to render a long or infinite list of items. ScrollView renders every child at once, so a big list eats memory and stutters. For lists, use FlatList, which only renders what is on screen. ScrollView is for a small amount of known content, not data lists.

Resources

Primary (free):

• React Native — Core components · docs
• React Native — Handling text input · docs
• React Native — Using a ScrollView · docs

Practice

Build a profile screen using the core components: a SafeAreaView wrapper, an Image avatar, Text for name and bio, a TextInput, and a Pressable button. Make it scroll with ScrollView since the content is small and fixed. Done when every element uses the right primitive.

Outcomes

• Build screens from View, Text, Image, and inputs.
• Wrap text correctly inside Text.
• Use ScrollView for small fixed content.
• Handle touches with Pressable.