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 ~!@#$&*()=:/,;?+ 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):

import React from 'react';
import base64 from 'react-native-base64'
import { View, Text } from 'react-native';

class ReactNativeComponents extends React.Component {
    constructor(props){
        super(props);
    }

	componentDidMount() {
		encodeURI("http://infinitbility.github.io/ encodeURI/")
        // "http://infinitbility.github.io/%20encodeURI/"

        encodeURIComponent("http://infinitbility.github.io/ encodeURI/")
        // "http%3A%2F%2Finfinitbility.github.io%2F%20encodeURI%2F"
	}

   render() {
      return (
         <View>
             <Text>React Components</Text>
         </View>
      );
   }
}

export default ReactNativeComponents;

Thanks for Reading…