React Native - Parse URL to get Query Variable - react-native

Question

Looking for a way to parse a URL to get a query variable in React Native received from Linking.
I'm receiving the URL as something like:
url-app-scheme://somePage?someVar=someVal
I'd like to get the someVar value from the URL.
Any thoughts?

Answer 1

This should do the trick
var url = "http://example.com?myVar=test&otherVariable=someData&number=123"
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while (match = regex.exec(url)) {
params[match[1]] = match[2];
}
console.log(params)

Answer 2

There is a URL class in JavaScript which is intended to let you both build and parse URLs robustly, making query parameters easily accessible:
const url = new URL('url-app-scheme://somePage?someVar=someVal');
url.searchParams.get('someVar')
Sadly, the implementation of URL in React Native is not complete and has some known bugs. Fortunately, there is a solid polyfill library called react-native-url-polyfill which provides an implementation of URL that is well behaved and tested - I highly recommend it.

Answer 3

Using query-string its working
yarn add query-string
import queryString from 'query-string';
const parsed = queryString.parseUrl("https://pokeapi.co/api/v2/pokemon?offset=10&limit=10");
console.log(parsed.query.offset) will display 10

Answer 4

There are ways of doing this that you can leverage from the JS ecosystem. Try URI.js https://github.com/medialize/URI.js

Answer 5

Try url https://www.npmjs.com/package/url
"This module has utilities for URL resolution and parsing meant to have feature parity with node.js core url module."
The node URL object is available to your app when using the Chrome react-native debugger, but is not available on your iPhone when untethered.
So use this package
npm install url
Sample code:
import url from 'url';
...
let urlObject = url.parse(inUrlString);
let outUrlString = urlObject.protocol + '//' + urlObject.host + '/more/jump?jump_path=' + encodeURIComponent(urlObject.pathname);

Answer 6

url="example.com/path/?id=1"
let urlObject = url.parse(url, true); // second parameter `true` (parse search query)
console.log(urlObject.query['id']); // 1

Answer 7

Update: This is not a solution to the above question because it doesn't work unless in debugging mode. I have not deleted this answer however, because I think it points out a note worthy nuance.
JavaScript's very own URL Web API is supported in React Native (using version 0.46). You can use to to parse or build any and every part of the url with great ease.
The API is identical to the WHATWG API of the URL module in Node.js This answer should really be more obvious, but its easy to get lost with the number of okay url parsing packages available.
Edit: This works only in the JS debugging mode for some reason, and not otherwise. So this solution doesn't really hold valid, but I'm leaving it here because I'd love to know how to get the same URL module to work with react-native.