React Native - get url search params

Question

I am trying to get URL params in a React Native app.

What I tried to do:

1. fails because searchParams is an empty list

const parsedUrl = new URL(url)
// here the searchParams are empty list
console.log(parsedUrl.searchParams)

2. fails because the following error is shown:

[Error: not implemented]

const parsedUrl = new URLSearchParams(url)
console.log(parsedUrl.get(param))

• MaartenDev: Could you provide an example url that contains values you want to acess?
• spatak: myapp://?code=123123-1123123-418c-33213-123123
• MaartenDev: You should look into deep linking: reactnavigation.org/docs/deep-linking that is the way urls work on mobile devices and apps

Answer 1

You Can Try this:

( Only For React Js )

function getURLParams(parameterName, url) {
 let name = parameterName.replace(/[\[\]]/g, '\\$&');
 let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
 if (!results) return null;
 if (!results[2]) return null;
 return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// For Current Window URL
console.log(getURLParams("param1", window.location.href));
// For Custom URL
console.log(getURLParams("param1", "https://example.com/index.html?param1=Hello"));

Or This

( For React Native )

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

Answer 2

const getSearchParamFromURL = (url, param) => {
 const include = url.includes(param)
 if (!include) return null
 const params = url.split(/([&,?,=])/)
 const index = params.indexOf(param)
 const value = params[index + 2]
 return value
}
const _url = 'myapp://?code=123123-1123123-418c-33213-123123&param_key=param_value'
getSearchParamFromURL(_url, 'code') // output: 123123-1123123-418c-33213-123123

• MaartenDev: This seems to solve the wrong problem, the question is about retrieving the parameter value not parsing the parameter value

Answer 3

This is how I do in my custom Link.tsx component in react-navigation 5:

export const Link = function Link({ to, action, target, onPress, children, params }: Props) {
 const searchParams = new URLSearchParams(params as Record<string, string>)
 return (
 <DefaultLink
 to={`${to.startsWith('/') ? to : `/${to}`}${params ? `?${searchParams.toString()}` : ''}`}
 action={action}
 target={target}
 onPress={onPress}>
 {children}
 </DefaultLink>
 )
}

If you are also using react-navigation, you can use pathConfig.parse and pathConfig.stringify to automatically convert the typing. getStateFromPath|getPathFromState

Answer 4

This is the function I use (typescript). It returns an object of { key: value }.

export const getUrlParams = (url: string) => {
 const params: Record<string, string> = {};
 const queryString = url.split('?')[1];
 if (!queryString) {
 return params;
 }
 queryString.split('&').forEach((param) => {
 const [key, value] = param.split('=');
 if (key) {
 params[decodeURIComponent(key)] = decodeURIComponent(value || '');
 }
 });
 return params;
};