Skip to main content

​
About the Example App

The Mapbox Maps SDK for React Native includes a comprehensive demo application with over 100 working examples. These examples demonstrate all major features of the SDK, from basic map rendering to advanced data visualization and animations.

​
Running the Examples

The example app is located in the example/ directory of the SDK repository. To run it:

​
Installation

  1. Navigate to the example directory:
cd example
  1. Create an accesstoken file in the root with your Mapbox access token
  2. Install dependencies: 
yarn install
  1. For iOS, install pods:
cd ios && pod install

​
Running on iOS

yarn ios

​
Running on Android

yarn android
If you’re using nvm, copy ios/.xcode.env as ios/.xcode.env.local and modify as needed.

​
Example Categories

The examples are organized into the following categories:

​
Map Basics

  • ShowMap - Basic map with user location tracking
  • StyleJSON - Custom map styles using JSON
  • ChangeLayerColor - Dynamically modify layer styles
  • MapAndRNNavigation - Integration with React Navigation

​
Camera Controls

  • FlyTo - Animated camera transitions
  • Fit - Fit camera to bounds
  • SetPitch - Control camera pitch/tilt
  • RestrictMapBounds - Limit pan area

​
Annotations & Markers

  • ShowPointAnnotation - Interactive point annotations
  • MarkerView - Custom marker views
  • CustomCallout - Custom annotation callouts

​
Data Visualization

  • Heatmap - Heatmap layer for density visualization
  • Earthquakes - Clustering with custom properties
  • DataDrivenCircleColors - Data-driven styling
  • ChoroplethLayerByZoomLevel - Choropleth maps

​
Animations

  • AnimatedPoint - Animate marker positions
  • DriveTheLine - Route animation
  • AnimatedLine - Line animations

​
Advanced Features

  • OfflineExample - Offline map regions
  • QueryAtPoint - Query map features
  • TakeSnapshot - Map snapshots

​
Example Structure

Each example follows a consistent pattern: 
import { MapView, Camera } from '@rnmapbox/maps';

const MyExample = () => {
  return (
    <MapView style={{ flex: 1 }}>
      <Camera
        defaultSettings={{
          centerCoordinate: [-122.4, 37.8],
          zoomLevel: 12,
        }}
      />
    </MapView>
  );
};

export default MyExample;

​
Source Code Location

All examples are located in the repository at: 
example/src/examples/
├── Animations/
├── Annotations/
├── Camera/
├── FillRasterLayer/
├── LineLayer/
├── Map/
├── SymbolCircleLayer/
├── UserLocation/
└── ...

​
GitHub Repository

View all examples on GitHub: https://github.com/rnmapbox/maps/tree/main/example/src/examples

​
Learning Path

We recommend exploring examples in this order:
  1. Basic Map - Start with simple map rendering
  2. Custom Styles - Learn to customize map appearance
  3. Markers & Annotations - Add interactive elements
  4. Data Visualization - Display complex datasets
  5. Animations - Create dynamic experiences

​
Next Steps

Basic Map

Learn the fundamentals of rendering maps

Custom Styles

Customize your map’s appearance

Markers

Add markers and annotations

Data Visualization

Visualize complex datasets

Build docs developers (and LLMs) love

Get started for freeTalk to us