Components

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.

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:

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.

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;