React Native Core Components: Your UI Building Blocks

Why it exists

To provide a unified, cross-platform API for building mobile UIs. Instead of writing separate Swift/Kotlin code for every button or text field, developers can use a single set of JavaScript components that render to native platform elements, speeding up development significantly.

The mental model

Think of Core Components as a standard library of UI building blocks. They are the fundamental pieces like View, Text, and Image that you combine to create your app's interface. React Native ensures that when you use a <Button>, it renders a native Android button on Android and a native iOS button on iOS, abstracting away the platform-specific implementation details.

How it works

Each Core Component is a JavaScript abstraction that maps to one or more native UI widgets on the target platform. When your app runs, React Native translates your component tree into instructions that create and manage the corresponding native views. For example, a <Text> component becomes a TextView on Android and a UILabel on iOS. This gives your app a native look, feel, and performance.

When to use it

Use Core Components for the vast majority of your UI development. They are the foundation for almost every screen. Key components include: View for creating containers and layouts, Text for displaying all text, TextInput for user input, Pressable for handling touch interactions, and Image for displaying pictures. For long lists of data, FlatList is the go-to for its performance benefits, as it only renders items currently on screen.

When not to use it

While Core Components cover most common cases, they are not exhaustive. If you need highly specialized functionality, like a map view, a custom video player, or a complex chart, you'll likely need to use a third-party library from the React Native community or write your own native module. Don't try to build everything from scratch using just View and Text if a specialized component already exists.

One canonical example

A simple login screen demonstrates the composition of Core Components. You would use a main View as the screen container. Inside it, you'd place two TextInput components for the username and password. Below them, a Pressable or Button component would handle the login action. All text labels, like "Username" or "Login", would be rendered using the Text component.