Skip to main content
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: 
import {TouchableOpacity, Text} from 'react-native';

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

​
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:[email protected]');

​
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:
  • View: Container for other components
  • Text: Display text
  • Image: Display images
  • Button: Basic button
  • ScrollView: Scrollable container
  • TextInput: Text input field
  • FlatList: Performant list for large datasets
  • SectionList: List with section headers
  • StatusBar: Control status bar appearance
  • ActivityIndicator: Loading spinner
  • Modal: Present content above other views
  • ToastAndroid: Android toast notifications
  • DrawerLayoutAndroid: Navigation drawer
  • 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.

​
Next Steps

React Fundamentals

Learn how to use props, state, and hooks with these components

Handling Text Input

Deep dive into the TextInput component

Build docs developers (and LLMs) love

Get started for freeTalk to us