SpeedOf.Me API - React Native Integration

This example demonstrates how to integrate the SpeedOf.Me speed test API into a React Native app using react-native-webview.

How It Works

The SpeedOf.Me API is JavaScript-based, so React Native apps use WebView to:

  1. Load an HTML page containing the speed test
  2. Receive results via the onMessage prop

Files

Prerequisites

Quick Start

1. Install react-native-webview

npm install react-native-webview

# For iOS
cd ios && pod install

2. Configure API Credentials

SomApi.account = "YOUR_API_KEY";
SomApi.domainName = "your-domain.com";

3. Choose Loading Method

Option A: Remote URL (Recommended)

const webViewSource = { uri: 'https://your-domain.com/speedtest.html' };

Option B: Inline HTML

const webViewSource = { html: SPEED_TEST_HTML };

Architecture

React Native App
   └── SpeedTestScreen
           └── WebView (react-native-webview)
                   └── speedtest.html
                           └── SomApi.js
                                   ▼
                   window.ReactNativeWebView.postMessage(json)
                                   ▼
                   onMessage={(event) => {...}}

JavaScript-to-React-Native Communication

The HTML page sends messages via:

window.ReactNativeWebView.postMessage(JSON.stringify({
    type: 'completed',
    data: result
}));

React Native receives them:

<WebView
    onMessage={(event) => {
        const message = JSON.parse(event.nativeEvent.data);
        // Handle message
    }}
/>

TypeScript Types

interface SpeedTestResult {
    download: number;
    upload: number;
    latency: number;
    jitter: number;
    testServer?: string;
    ip_address?: string;
    hostname?: string;
}

Expo Support

npx expo install react-native-webview

Production Considerations

  1. API Key Security: Store keys in environment variables
  2. Network State: Check connectivity before starting test
  3. Background Handling: Speed tests should run in foreground only
  4. Data Usage Warning: Warn users on cellular connections

Troubleshooting

Links

Back to React Native Files All Examples API Portal