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
Final Result: React login form

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):

Copy 
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…