Components

Published Jan 5, 2023Updated Apr 10, 2023
Contribute to Docs

Components are units of reusable code that describe the appearance and behavior of a mobile application’s user interface (UI).

UI Views

Represented as small, rectangular, and oftentimes nestable elements, views can display text, media, and respond to user input. React Native invokes views in their native environment with JavaScript.

React Native to Native UI Representation

Native Components

These previously mentioned platform-backed components are called Native Components. Whether iOS or Android, React Native creates the corresponding, platform-specific view(s) for these components at runtime. Therefore, React Native apps look, feel, and perform like Native apps.

Core Components

React Native offers a set of essential, ready-to-use native components called core components. There are many components ranging from text to activity indicators. Most apps will use these core components:

Core Component Description
<View> A common container component that supports layout with flexbox, styles, touch handling, accessibility controls, and can contain other components inside such as other views. It is analogous to a non-scrolling <div> HTML element.
<Text> Displays text and supports styles and touch events. It is analogous to a paragraph element.
<Image> Displays different types of images, including from network, static, local disks, and from ‘data:’ URI scheme. It is analogous to an image element.
<TextInput> Allows the input of text by the user and provides several configuration capabilities such as auto-correction, auto-capitalization, placeholder text, etc. It is analogous to an <input> element with its type attribute set to "text".
<ScrollView> A container that can nest multiple components and views that can scroll vertically or horizontally. It is analogous to a scrolling div element.

Community Components

Components can also be custom-built; there’s a big ecosystem of these community-built components that can be accessed on the Native Directory.

React and React Native Components

Examples

React Native uses the same component syntax structure for its views to display elements to the screen, like in React.js. The following examples are of a Box component defined as both a class and functional component:

import React, { Component } from 'react';
import { Text } from 'react-native';
// Functional Component
const Box = () => {
return <Text>I have a small box</Text>;
};
// Class Component
class Box extends Component {
render() {
return <Text>I have a small box</Text>;
}
}
export default Box;

Note: To test this example, either the class or function definition of the Box component must be commented out before doing so.

JSX, Props, and State

Components also use JSX, accept props, and manage state.

JSX

As in React, the JSX syntax in React Native allows elements and variables to be written inside the JavaScript:

import React from 'react';
import { Text } from 'react-native';
const Box = () => {
const size = “small”;
return (
<Text>I have a {size} box</Text>
);
}
export default Box;

Props

Most core components in React Native accept props. For example, different sizes for the Box component can be passed via props:

import React from 'react';
import { View, Text } from 'react-native';
const Box = (props) => {
return (
<Text>I have a {props.size} box</Text>
);
}
const BoxCollection = () => {
return (
<View>
<Box size=“small” />
<Box size=“medium” />
<Box size=“large” />
</View>
);
}
export default BoxCollection;

State

Like in React, components in React Native also use state to handle data that changes over time, such as with user interaction:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const Box = () => {
const [size, setSize] = useState('small');
return (
<View>
<Text>I have a {size} box</Text>
<Button color="red" onPress={() => setSize('small')} title="Small" />
<Button color="blue" onPress={() => setSize('medium')} title="Medium" />
<Button color="orange" onPress={() => setSize('large')} title="Large" />
</View>
);
};
export default Box;

All contributors

Looking to contribute?

Learn React on Codecademy