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 URLencodeURIComponent()
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';45class ReactNativeComponents extends React.Component {6 constructor(props){7 super(props);8 }910 componentDidMount() {11 encodeURI("http://infinitbility.com/ encodeURI/")12 // "http://infinitbility.com/%20encodeURI/"1314 encodeURIComponent("http://infinitbility.com/ encodeURI/")15 // "http%3A%2F%2Finfinitbility.com%2F%20encodeURI%2F"16 }1718 render() {19 return (20 <View>21 <Text>React Components</Text>22 </View>23 );24 }25}2627export default ReactNativeComponents;
Thanks for Reading…
Follow me on Twitter
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.