react-native-url-polyfill

With Metro running, open a new terminal window from the root of your project and run the following to build and launch the Android application:

# Using npm
npm run android

# OR using Yarn
yarn android

To run the iOS application, you must first ensure CocoaPods dependencies are installed.

1. Install CocoaPods dependencies:

   • If this is your first time or you have updated native dependencies, run:

     bundle exec pod install

   • If you are setting up the Ruby environment for the first time, run:

     bundle install

2. Run the app:

   # Using npm
   npm run ios
   
   # OR using Yarn
   yarn ios

To automatically apply the polyfill globally, import react-native-url-polyfill/auto at the very top of your JavaScript entry-point file (usually index.js). This method is the simplest way to ensure URL and URLSearchParams are available throughout your application.

Note: On web platforms, this import acts as a no-op.

import 'react-native-url-polyfill/auto';

If you do not want to overwrite the default React Native URL implementation, you can use this library as a ponyfill by importing the specific classes you need. This allows you to use the WHATWG-compliant implementation alongside the existing global URL.

import { URL, URLSearchParams } from 'react-native-url-polyfill';

const url = new URL('https://github.com');
const searchParams = new URLSearchParams('q=GitHub');

Install the polyfill using your preferred package manager (e.g., npm or Yarn) before choosing an integration method.

yarn add react-native-url-polyfill

Once the Metro Bundler is running in its own terminal, open a new terminal from the root of your project to launch the application on your emulator or simulator.

# For Android
# using npm
npm run android
# OR using Yarn
yarn android

# For iOS
# using npm
npm run ios
# OR using Yarn
yarn ios

After modifying your code (e.g., in App.tsx), you can reload the application to apply changes using the following platform-specific methods:

• Android: Press the <kbd>R</kbd> key twice or open the Developer Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows/Linux or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> on macOS) and select "Reload".
• iOS: Press <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in the iOS Simulator.

While Fast Refresh automatically updates your app when you save files, you can perform a manual full reload to reset the application state:

• Android: Press the <kbd>R</kbd> key twice, or open the Dev Menu via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) and select "Reload".
• iOS: Press <kbd>R</kbd> in the iOS Simulator.

Before building your app, you must start Metro, the JavaScript build tool for React Native. Run the following command from the root of your project:

# Using npm
npm start

# OR using Yarn
yarn start

If you need control over exactly when the polyfill is applied, import setupURLPolyfill and invoke it manually in your code.

import { setupURLPolyfill } from 'react-native-url-polyfill';

setupURLPolyfill();