Navigate back to the homepage

How to encode a URL in react native

Infinitbility
React Native
August 10th, 2021 · 1 min read
How to encode a URL in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to encode your URL in react native, we know react-native javascript codebase and javascript provide two methods to encode URL encodeURI() and encodeURIComponent().

Depending on what you need to do, there are 2 JavaScript functions that will help you.

The first is encodeURI(), and the second is encodeURIComponent().

Note: you might read about escape(), but that is deprecated and should not be used.

Those 2 methods differ in which characters they do encode.

In details, encodeURI() does not encode [email protected]#$&*()=:/,;?+ and encodeURIComponent() does not encode -_.!~*'(), encoding all the other characters. Why do they differ? Because they are meant for different uses:

  • encodeURI() is meant to encode a full URL
  • encodeURIComponent() is meant to encode a single URL parameter value

If you were to call encodeURIComponent() on a full URL since it does encode /, the URL path separators would be encoded as well (among other things):

1import React from 'react';
2import base64 from 'react-native-base64'
3import { View, Text } from 'react-native';
4
5class ReactNativeComponents extends React.Component {
6 constructor(props){
7 super(props);
8 }
9
10 componentDidMount() {
11 encodeURI("http://infinitbility.com/ encodeURI/")
12 // "http://infinitbility.com/%20encodeURI/"
13
14 encodeURIComponent("http://infinitbility.com/ encodeURI/")
15 // "http%3A%2F%2Finfinitbility.com%2F%20encodeURI%2F"
16 }
17
18 render() {
19 return (
20 <View>
21 <Text>React Components</Text>
22 </View>
23 );
24 }
25}
26
27export default ReactNativeComponents;

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to encode and decode base64 in react native

How to encode and decode base64 in react native

React Native base64 Example

August 10th, 2021 · 1 min read
How to create and use function in react native

How to create and use function in react native

React Native functions Example

August 9th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]