{"library":"react-native-url-polyfill","title":"React Native URL Polyfill","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-url-polyfill"],"cli":null},"imports":["import 'react-native-url-polyfill/auto';","import { URL, URLSearchParams } from 'react-native-url-polyfill';","import 'react-native-url-polyfill/auto';\nURL.canParse('https://example.com');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import 'react-native-url-polyfill/auto';\nimport { useEffect, useState } from 'react';\nimport { Text, View, StyleSheet } from 'react-native';\n\nconst App = () => {\n  const [parsedUrl, setParsedUrl] = useState('');\n  const [searchParam, setSearchParam] = useState('');\n  const [canParseResult, setCanParseResult] = useState('');\n\n  useEffect(() => {\n    const urlString = 'https://www.example.com/path?query=value&id=123#fragment';\n    try {\n      const url = new URL(urlString);\n      setParsedUrl(`Origin: ${url.origin}, Host: ${url.host}, Path: ${url.pathname}`);\n      setSearchParam(`Query 'id': ${url.searchParams.get('id')}`);\n\n      // Test URL.canParse (introduced in v3.0.0)\n      const validParse = URL.canParse(urlString);\n      const invalidParse = URL.canParse('invalid-url');\n      setCanParseResult(`Can parse valid URL: ${validParse}, Can parse invalid URL: ${invalidParse}`);\n\n    } catch (e) {\n      setParsedUrl(`Error parsing URL: ${e.message}`);\n    }\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>react-native-url-polyfill Demo</Text>\n      <Text style={styles.text}>Original URL: https://www.example.com/path?query=value&id=123#fragment</Text>\n      <Text style={styles.text}>Parsed URL Info: {parsedUrl}</Text>\n      <Text style={styles.text}>Search Param Info: {searchParam}</Text>\n      <Text style={styles.text}>URL.canParse Result: {canParseResult}</Text>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n    backgroundColor: '#f5fcff',\n  },\n  title: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  text: {\n    fontSize: 16,\n    marginBottom: 5,\n    textAlign: 'center',\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to apply the URL polyfill and use `URL`, `URLSearchParams`, and the static method `URL.canParse()` in a React Native component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}