React Native URL Polyfill

3.0.0 · active · verified Sun Apr 19

react-native-url-polyfill is a lightweight and robust polyfill for the WHATWG URL Standard, specifically optimized for React Native environments. It addresses limitations and inconsistencies in React Native's built-in URL implementation, which can lead to unexpected errors with complex URL parsing or specific properties like `searchParams` and `hostname`. The current stable version is 3.0.0. While there isn't a fixed monthly cadence, the project actively releases major versions for significant updates like new Web API features (e.g., `URL.canParse()`) and minor/patch versions for bug fixes and compatibility improvements. Key differentiators include its lightweight nature (stripping Unicode support to reduce bundle size to ~40KB, down from 372KB for the full `whatwg-url` package), trustworthiness (following the spec, backed by unit and Detox e2e tests), and explicit support for Hermes, Expo, and Blob objects.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to apply the URL polyfill and use `URL`, `URLSearchParams`, and the static method `URL.canParse()` in a React Native component.

import 'react-native-url-polyfill/auto';
import { useEffect, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  const [parsedUrl, setParsedUrl] = useState('');
  const [searchParam, setSearchParam] = useState('');
  const [canParseResult, setCanParseResult] = useState('');

  useEffect(() => {
    const urlString = 'https://www.example.com/path?query=value&id=123#fragment';
    try {
      const url = new URL(urlString);
      setParsedUrl(`Origin: ${url.origin}, Host: ${url.host}, Path: ${url.pathname}`);
      setSearchParam(`Query 'id': ${url.searchParams.get('id')}`);

      // Test URL.canParse (introduced in v3.0.0)
      const validParse = URL.canParse(urlString);
      const invalidParse = URL.canParse('invalid-url');
      setCanParseResult(`Can parse valid URL: ${validParse}, Can parse invalid URL: ${invalidParse}`);

    } catch (e) {
      setParsedUrl(`Error parsing URL: ${e.message}`);
    }
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>react-native-url-polyfill Demo</Text>
      <Text style={styles.text}>Original URL: https://www.example.com/path?query=value&id=123#fragment</Text>
      <Text style={styles.text}>Parsed URL Info: {parsedUrl}</Text>
      <Text style={styles.text}>Search Param Info: {searchParam}</Text>
      <Text style={styles.text}>URL.canParse Result: {canParseResult}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5fcff',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  text: {
    fontSize: 16,
    marginBottom: 5,
    textAlign: 'center',
  },
});

export default App;

view raw JSON →