React Native: How to parse url query parameters
Tags: react, reactnative, javascript
Published: 2020-04-21 17:34:54

---
title: React Native: How to parse url query parameters
published: true
date: 2019-05-09 00:00:00 UTC
tags: ReactJs,ReactNative,Javascript
canonical_url: https://www.jskap.com/blog/React-Native-parse-url-query-params/
---

![](https://s3.ap-south-1.amazonaws.com/kapilgorve/blog/covers/React-Native-parse-url-query-params.jpg)(Image Credit : unsplash.com)

## TLDR Solution[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#TLDR-Solution)

```
let url = 'AppName://redirect/subpart/?token=123&refreshToken=123'
let regex = /[?&]([^=#]+)=([^&#]*)/g,
  params = {},
  match
while ((match = regex.exec(url))) {
  params[match[1]] = match[2]
  console.log(match[1], match[2])
}
const { token, refreshToken } = params
```

If you are on a deadline (when we aren't ? eh) and don't care about the explaination. Copy the snippet and solve your problem. I didn't understand what's happening here so I bothered to blog about it after I was done with my deadline. The thing is I don't know much about regular expressions. I couldn't write one from scratch without examples even my life depended on it. As a junir deve I was told to avoid using them and I listened to the advice. So here we are.

## The Problem[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#The-Problem)

When it comes to url parsing I use `URL` interface which is present in browser api. To get search `GET` params present in url I would do something like this :

```
// https://some.site/?id=123
var parsedUrl = new URL(window.location.href)
console.log(parsedUrl.searchParams.get('id')) // 123
```

This snippet would solve the usual problems in for frontend application. There is no such equivalent in React Native thoguh. All the google searches came up with third party libraries. Or Stack Overlflow answers containing complex regular expressions to deal with this. I don't feel comfortable with regular expressions. As I am told they can be pretty difficult to debug without context. I feel the same.

I could have used string methods. Well I did when I only had to get only pne parameter. After adding some more parameters which were essential. The string methods felt more of a hack and not an appropriate solution. It was also possible that the sequence could be changed later for the url and this would break the published app feature. That would mean adding a new release each time the sequence changes and breaking changes. With React Native I am very cautious about adding third party libraries for trivial things. After a day of more googling found this solution. Sadly when wrting this article I couldn't find the original SO answer for this.

## Explaination[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#Explaination)

`let regex = /[?&]([^=#]+)=([^&#]*)/g,` We are defining a pattern here. This pattern would start with `&` character. As our url params would be after `&`.

`regex.exec(url)` The `.exec()` function would search for a pattern `regex` defined in `url`.

Well why we are using a while loop ?

`match = regex.exec(url);` This would return each match every time it gets executed.If you only have one parameter, using a loop wouldn't make sense. I needed two params , so I am using a `while` loop here. The returned match is in format match[0] = matched string, match[1]=key , match[2]=value.

```
let url = 'AppName://redirect/subpart/?token=123&refreshToken=123';
      let regex = /[?&]([^=#]+)=([^&#]*)/g,
      params = {},
      match;
      match = regex.exec(url);
      console.log(match);

Output:
  [
    0: "?token=123"
    1: "token"
    2: "123"
    groups: undefined
    index: 27
    input: "AppName://redirect/subpart/?token=123&refreshToken=123"
    length: 3
    __proto__ : Array(0)
  ]
```

`params[match[1]] = match[2]` We store matched string in `params` as key value pair. This is just another fancy and dynamic way to write `params.token=match[2]`. This way we write a dynamic key to `params`. First time this would store a `token` property for me and second time `refreshToken`.

Fianlly I am extracting both properties as separate variables using [ES6 destructuring syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).

`const { token, refreshToken } = params`

  

This post was originally published at https://www.jskap.com/blog/React-Native-parse-url-query-params/

  

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at [https://twitter.com/kapilgorve](https://twitter.com/kapilgorve)