Components and APIs

React Native provides two types of building blocks: Components for UI elements you can see and touch, and APIs for accessing device features and functionality.

Components vs APIs

Components

Visual elements that appear in your app’s UI. Components return JSX to render.

APIs

JavaScript modules that provide device functionality without rendering UI.

Core Components

Components are the visual building blocks of your app. They’re React components that render native platform views.

View Component

The fundamental container component. On iOS it maps to UIView, on Android to android.view.View.

View.js (from React Native source)

import {View, StyleSheet} from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <Text>Card Header</Text>
      </View>
      <View style={styles.body}>
        <Text>Card content goes here</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 8,
    padding: 16,
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  header: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
    paddingBottom: 8,
    marginBottom: 8,
  },
  body: {
    // body styles
  },
});

Text Component

For displaying text. Unlike web, text must be inside a <Text> component.

import {Text, StyleSheet} from 'react-native';

<Text style={styles.title}>Hello World</Text>
<Text style={styles.subtitle}>Welcome to React Native</Text>

Button Component

A basic button that works on all platforms. From the React Native source:

Button.js (from source)

import {Button, Alert} from 'react-native';

function MyButton() {
  return (
    <Button
      title="Press me"
      onPress={() => Alert.alert('Button pressed')}
      color="#841584"
      accessibilityLabel="Learn more about this purple button"
    />
  );
}

The Button component renders differently on iOS and Android. On iOS, color changes the text color. On Android, it changes the background color.

Image Component

import {Image} from 'react-native';

// Local image
<Image
  source={require('./assets/logo.png')}
  style={{width: 100, height: 100}}
/>

// Remote image
<Image
  source={{uri: 'https://example.com/logo.png'}}
  style={{width: 100, height: 100}}
/>

ScrollView Component

Wraps content to make it scrollable:

import {ScrollView, Text} from 'react-native';

<ScrollView>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</ScrollView>

Touchable Components

For handling touch interactions:

TouchableOpacity
TouchableHighlight
Pressable (Recommended)

import {TouchableOpacity, Text} from 'react-native';

<TouchableOpacity
  onPress={() => console.log('Pressed')}
  activeOpacity={0.7}
>
  <Text>Tap me</Text>
</TouchableOpacity>

import {TouchableHighlight, Text} from 'react-native';

<TouchableHighlight
  onPress={() => console.log('Pressed')}
  underlayColor="#DDDDDD"
>
  <Text>Tap me</Text>
</TouchableHighlight>

import {Pressable, Text} from 'react-native';

<Pressable
  onPress={() => console.log('Pressed')}
  style={({pressed}) => [
    {backgroundColor: pressed ? '#ddd' : '#fff'}
  ]}
>
  <Text>Tap me</Text>
</Pressable>

APIs (Non-UI Modules)

APIs provide access to device features without rendering anything:

Alert API

import {Alert} from 'react-native';

// Simple alert
Alert.alert('Title', 'Message');

// Alert with buttons
Alert.alert(
  'Confirm Action',
  'Are you sure?',
  [
    {text: 'Cancel', style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
);

Linking API

import {Linking} from 'react-native';

// Open URL
Linking.openURL('https://example.com');

// Open phone dialer
Linking.openURL('tel:+1234567890');

// Open email
Linking.openURL('mailto:support@example.com');

Vibration API

import {Vibration} from 'react-native';

// Vibrate for 400ms
Vibration.vibrate(400);

// Pattern: vibrate 500ms, pause 500ms, vibrate 500ms
Vibration.vibrate([500, 500, 500]);

AppState API

import {AppState, useEffect} from 'react-native';

function MyComponent() {
  useEffect(() => {
    const subscription = AppState.addEventListener('change', (nextAppState) => {
      if (nextAppState === 'active') {
        console.log('App has come to the foreground');
      }
    });

    return () => subscription.remove();
  }, []);
}

Component Categories

React Native components fall into these categories:

Basic Components

View: Container for other components
Text: Display text
Image: Display images
Button: Basic button
ScrollView: Scrollable container
TextInput: Text input field

List Components

FlatList: Performant list for large datasets
SectionList: List with section headers

Platform-Specific Components

StatusBar: Control status bar appearance
ActivityIndicator: Loading spinner
Modal: Present content above other views

Android-Only Components

ToastAndroid: Android toast notifications
DrawerLayoutAndroid: Navigation drawer

iOS-Only Components

ActionSheetIOS: iOS action sheets
InputAccessoryView: Keyboard accessory view

Using Components from Source

When you import a component from React Native:

import {View, Text, Button} from 'react-native';

These are loaded from react-native/Libraries/Components/. Each component is implemented as a React component that interfaces with native code.

Getting Started

Core Concepts

Architecture

Native Modules

Platform Guides

Performance

Developer Tools

Advanced Guides

Components vs APIs

Components

APIs

Core Components

View Component

Text Component

Button Component

Image Component

ScrollView Component

Touchable Components

APIs (Non-UI Modules)

Alert API

Linking API

Vibration API

AppState API

Component Categories

Using Components from Source

Next Steps

React Fundamentals

Handling Text Input

​Components vs APIs

Components

APIs

​Core Components

​View Component

​Text Component

​Button Component

​Image Component

​ScrollView Component

​Touchable Components

​APIs (Non-UI Modules)

​Alert API

​Linking API

​Vibration API

​AppState API

​Component Categories

​Using Components from Source

​Next Steps

React Fundamentals

Handling Text Input

Components vs APIs

Core Components

View Component

Text Component

Button Component

Image Component

ScrollView Component

Touchable Components

APIs (Non-UI Modules)

Alert API

Linking API

Vibration API

AppState API

Component Categories

Using Components from Source

Next Steps