Skip to main content
React Native provides a set of core components that are the building blocks for your mobile application. These components are platform-agnostic wrappers around native UI elements.

What are Core Components?

Core components are pre-built React components that map directly to native platform UI components. When you use a React Native component, React Native invokes the corresponding native component on iOS and Android.

Essential Components

Layout Components

View

The most fundamental component for building UI. A container that supports layout with flexbox, style, and touch handling.

ScrollView

A scrollable container that can host multiple components and views.

Content Components

Text

A component for displaying text.

Image

A component for displaying images from various sources.

Input Components

TextInput

A foundational component for inputting text via keyboard.

Component Hierarchy

React Native components follow a hierarchy:
View (Container)
├── Text (Display)
├── Image (Display)
├── TextInput (Input)
└── ScrollView (Layout)
    └── View (Nested Content)

Key Concepts

Props

All React Native components accept props to customize their behavior and appearance. Common props include:
  • style - Styling using React Native’s style system
  • testID - Identifier for testing
  • accessible - Accessibility configuration

Styling

Components use the style prop with StyleSheet API or inline styles. React Native uses flexbox for layout.
import { View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

<View style={styles.container} />

Platform-Specific Behavior

Many components have platform-specific props and behaviors. These are clearly marked in the documentation with platform tags.

Next Steps

Explore each component’s documentation to learn about their specific props, methods, and usage examples.

Build docs developers (and LLMs) love