react-native-url-polyfill

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;